ab-ui-library 1.0.1

package/components/Select/ProfileDropdown/index.js

@@ -0,0 +1,83 @@
+import { _ as _slicedToArray } from '../../../slicedToArray-0c706912.js';
+import React, { useRef, useId } from 'react';
+import { Text } from '../../Text/Text.js';
+import 'dayjs';
+import { useOnOutsideClick } from '../../../hooks/useOnOutsideClick.js';
+import '../../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import { Link } from '../../Link/Link.js';
+import 'classnames';
+import '../../../utils/helpers.js';
+import '../../../consts/index.js';
+import '../../../defineProperty-7db32082.js';
+import '../../../typeof-ecd92d7f.js';
+
+var ProfileDropdown = function ProfileDropdown(props) {
+  var menuRef = useRef(null);
+  var avatar = props.avatar,
+    name = props.name,
+    email = props.email,
+    bodyItems = props.bodyItems,
+    footerItems = props.footerItems,
+    className = props.className;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isOpen = _React$useState2[0],
+    setIsOpen = _React$useState2[1];
+  var closeDropdown = function closeDropdown() {
+    return setIsOpen(false);
+  };
+  useOnOutsideClick(menuRef.current, closeDropdown, isOpen, useId());
+  return /*#__PURE__*/React.createElement("div", {
+    ref: menuRef,
+    className: "relative ".concat(className)
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    }
+  }, avatar), isOpen && /*#__PURE__*/React.createElement("div", {
+    className: "profile-dropdown"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "profile-dropdown__top"
+  }, avatar, /*#__PURE__*/React.createElement("div", {
+    className: 'pl-12'
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: 'medium',
+    weight: 'bold',
+    lineHeight: 'large'
+  }, name), /*#__PURE__*/React.createElement(Text, {
+    type: 'tertiary'
+  }, email))), /*#__PURE__*/React.createElement("div", {
+    className: "profile-dropdown__menu"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: 'profile-dropdown__nav'
+  }, bodyItems === null || bodyItems === void 0 ? void 0 : bodyItems.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: index
+    }, item.text ? /*#__PURE__*/React.createElement(Link, {
+      url: item.url,
+      onclick: item.onclick,
+      className: 'profile-dropdown__nav__link'
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: 'flexbox align-items--center'
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, item.icon, item.text)), item.rightInfoProps)) : /*#__PURE__*/React.createElement("div", {
+      onClick: closeDropdown
+    }, item.children));
+  })), footerItems !== null && footerItems !== void 0 && footerItems.length ? /*#__PURE__*/React.createElement("div", {
+    className: 'profile-dropdown__bottom'
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: 'profile-dropdown__nav'
+  }, footerItems === null || footerItems === void 0 ? void 0 : footerItems.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: index
+    }, item.text ? /*#__PURE__*/React.createElement(Link, {
+      url: item.url,
+      onclick: item.onclick,
+      className: 'profile-dropdown__nav__link'
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: 'flexbox align-items--center'
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, item.icon, item.text)), item.rightInfoProps)) : item.children);
+  }))) : null)));
+};
+
+export { ProfileDropdown };

package/components/Select/Select/Select.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { TSingleSelectPropTypes } from '../types';
+export declare const Select: (props: TSingleSelectPropTypes) => JSX.Element | null;

package/components/Select/Select/Select.js

@@ -0,0 +1,331 @@
+import { _ as _defineProperty } from '../../../defineProperty-7db32082.js';
+import { _ as _slicedToArray } from '../../../slicedToArray-0c706912.js';
+import React, { useRef, useState, useMemo, useCallback, useEffect, useId } from 'react';
+import classNames from 'classnames';
+import { useGetElemSizes } from '../../../hooks/useGetElemSizes.js';
+import { useGetElemPositions } from '../../../hooks/useGetElemPositions.js';
+import { DROPDOWN_AND_INPUT_GAP } from '../../../consts/index.js';
+import { noop } from '../../../utils/helpers.js';
+import { useOnOutsideClick } from '../../../hooks/useOnOutsideClick.js';
+import '../../../hooks/useScreenSize.js';
+import { useGetHasBottomSpace, useGetHasTopSpace } from '../../../hooks/useGetHasBottomSpace.js';
+import 'react-hook-form';
+import { Input } from '../../Input/Input.js';
+import '../../Input/InputPassword.js';
+import { Text } from '../../Text/Text.js';
+import { OptionItem } from '../../../helperComponents/OptionItem/OptionItem.js';
+import 'react-syntax-highlighter';
+import '../../Checkbox/Checkbox.js';
+import 'react-dom';
+import 'framer-motion';
+import '../../Collapse/CollapseGroup/CollapseGroup.js';
+import '../SharedComponents/ContentTop.js';
+import { Loading } from '../SharedComponents/Loading.js';
+import { useChangePositionsOnScroll } from '../../../hooks/useChangePositionsOnScroll.js';
+import { IconCaretDownFilled } from '../../SVGIcons/IconCaretDownFilled.js';
+import { IconCaretUpFilled } from '../../SVGIcons/IconCaretUpFilled.js';
+import '../../../typeof-ecd92d7f.js';
+import 'dayjs';
+import '../../../extends-e8ef956f.js';
+import '../../../objectWithoutProperties-fcd64cc7.js';
+import 'react-input-mask';
+import 'react-number-format';
+import '../../../helperComponents/Label/Label.js';
+import '../../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../../helperComponents/IconDynamicComponent/constants.js';
+import '../../SVGIcons/IconCheckmarkCircleFilled.js';
+import '../../Popover/Popover.js';
+import '../../../hooks/useGetTooltipStyles.js';
+import '../../../hooks/useGetTooltipPosition.js';
+import '../../Tooltip/types.js';
+import '../../../hooks/useHideOnScroll.js';
+import '../../Link/Link.js';
+import '../../SVGIcons/IconInfo.js';
+import '../../SVGIcons/IconDismissCircle.js';
+import '../../SVGIcons/IconDismissCircleFilled.js';
+import '../../SVGIcons/IconEyeOff.js';
+import '../../SVGIcons/IconEyeOn.js';
+import '../../Divider/Divider.js';
+import '../../Tooltip/Tooltip.js';
+import '../../Avatar/Avatar.js';
+import '../../FileUpload/FileUpload.js';
+import '../../../toConsumableArray-e0031ed3.js';
+import '../../FileUpload/types.js';
+import '../../Button/Button.js';
+import '../../../helperComponents/Loader/Loader.js';
+import '../../Button/consts.js';
+import '../../FileUpload/UploadItems.js';
+import '../../../hooks/useFormProps.js';
+import '../../../context/types.js';
+import '../../SVGIcons/IconDelete.js';
+import '../../SVGIcons/IconEditFilled.js';
+import '../../SVGIcons/IconEdit.js';
+import '../../SVGIcons/IconAttach.js';
+import '../../SVGIcons/IconCheckmark.js';
+import '../../Collapse/CollapseItem/CollapseItem.js';
+import '../../SVGIcons/IconChevronRight.js';
+import '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
+import '../../SVGIcons/IconChevronDown.js';
+import '../SharedComponents/Actions.js';
+import '../../Menu/Menu.js';
+import '../../SVGIcons/IconMore.js';
+import '../../SVGIcons/IconDismissFilled.js';
+import '../../SVGIcons/IconSearchFilled.js';
+import '../../SVGIcons/IconSelectAllOff.js';
+
+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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Select = function Select(props) {
+  var _selectedOption$optio, _selectedOption$optio2, _scrollRef$current2;
+  var className = props.className,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'large' : _props$size,
+    name = props.name,
+    value = props.value,
+    label = props.label,
+    avatar = props.avatar,
+    options = props.options,
+    hasError = props.hasError,
+    isLoading = props.isLoading,
+    isValid = props.isValid,
+    withSearch = props.withSearch,
+    disabled = props.disabled,
+    _props$dataId = props.dataId,
+    dataId = _props$dataId === void 0 ? '' : _props$dataId,
+    placeHolder = props.placeHolder,
+    isCreatable = props.isCreatable,
+    _props$selectedItem = props.selectedItem,
+    selectedItem = _props$selectedItem === void 0 ? null : _props$selectedItem,
+    setFieldValue = props.setFieldValue,
+    setSelectedItem = props.setSelectedItem,
+    outerHelperText = props.outerHelperText,
+    innerHelperText = props.innerHelperText,
+    isRequiredField = props.isRequiredField,
+    labelLeftIconProps = props.labelLeftIconProps,
+    labelRightIconComponent = props.labelRightIconComponent,
+    optionRightIconComponent = props.optionRightIconComponent,
+    _props$selectRightIco = props.selectRightIconProps,
+    selectRightIconProps = _props$selectRightIco === void 0 ? {
+      Component: IconCaretDownFilled,
+      size: 'xsmall'
+    } : _props$selectRightIco,
+    _props$selectRightIco2 = props.selectRightIconOpenedProps,
+    selectRightIconOpenedProps = _props$selectRightIco2 === void 0 ? {
+      Component: IconCaretUpFilled,
+      size: 'xsmall'
+    } : _props$selectRightIco2,
+    labelAddons = props.labelAddons,
+    tooltipAddons = props.tooltipAddons,
+    renderOptions = props.renderOptions;
+  var scrollRef = useRef(null);
+  var inputRef = useRef(null);
+  var containerRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dropdownRef = _useState6[0],
+    setDropdownRef = _useState6[1];
+  var isDynamicSearchEnabled = useMemo(function () {
+    if (isOpen) {
+      var _scrollRef$current;
+      var scrollHeight = ((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollHeight) || 0;
+      var optionsContentHeight = (dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.offsetHeight) || 0;
+      return scrollHeight > optionsContentHeight;
+    }
+    return false;
+  }, [isOpen, scrollRef, dropdownRef]);
+  var currentSelection = value || selectedItem;
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedOption = _useState8[0],
+    setSelectedOption = _useState8[1];
+  var isWithSearch = withSearch && isDynamicSearchEnabled || isCreatable;
+  var setCurrentSelectedLabel = useCallback(function () {
+    var selectedItem = options.find(function (item) {
+      return item.value === currentSelection;
+    });
+    setSelectedOption(selectedItem);
+  }, [currentSelection, options]);
+  var leftIconProps = selectedOption !== null && selectedOption !== void 0 && (_selectedOption$optio = selectedOption.optionLeftIcon) !== null && _selectedOption$optio !== void 0 && _selectedOption$optio.Component ? {
+    Component: selectedOption === null || selectedOption === void 0 || (_selectedOption$optio2 = selectedOption.optionLeftIcon) === null || _selectedOption$optio2 === void 0 ? void 0 : _selectedOption$optio2.Component
+  } : null;
+  useEffect(function () {
+    setCurrentSelectedLabel();
+  }, [setCurrentSelectedLabel]);
+  var openDropdown = function openDropdown() {
+    return setIsOpen(true);
+  };
+  var closeDropdown = function closeDropdown() {
+    setIsOpen(false);
+    if (!isCreatable) {
+      setSearchValue('');
+      setCurrentSelectedLabel();
+    }
+  };
+  var handleOutsideClick = function handleOutsideClick() {
+    if (!searchValue) {
+      setCurrentSelectedLabel();
+    } else if (isCreatable) {
+      setSelectedOption({
+        label: searchValue,
+        value: searchValue
+      });
+      onItemSelect(searchValue);
+    }
+    closeDropdown();
+  };
+  useOnOutsideClick([inputRef.current, dropdownRef], handleOutsideClick, isOpen, useId());
+  var _useGetElemPositions = useGetElemPositions(inputRef.current),
+    bottom = _useGetElemPositions.bottom,
+    left = _useGetElemPositions.left,
+    top = _useGetElemPositions.top;
+  var _useGetElemSizes = useGetElemSizes(containerRef.current),
+    width = _useGetElemSizes.width;
+  var filteredData = useMemo(function () {
+    if (!searchValue) {
+      return options;
+    }
+    return options.filter(function (dataItem) {
+      return typeof dataItem.label === 'string' && dataItem.label.toLowerCase().includes(searchValue.toLowerCase());
+    });
+  }, [searchValue, options]);
+  var onItemSelect = function onItemSelect(value) {
+    if (setSelectedItem) {
+      setSelectedItem(value);
+    }
+    if (name && setFieldValue) {
+      setFieldValue(name, value);
+    }
+    closeDropdown();
+  };
+  var onItemDeselect = function onItemDeselect() {
+    return onItemSelect(null);
+  };
+  var onOpenOptions = function onOpenOptions(e) {
+    var result = e === null || e === void 0 ? void 0 : e.target;
+    var className = result === null || result === void 0 ? void 0 : result.getAttribute('class');
+    if (e && className && (className.indexOf('icon-') !== -1 || className.indexOf('svg-icon') !== -1)) {
+      setIsOpen(!isOpen);
+      e.preventDefault();
+      return;
+    } else if (isOpen && !isWithSearch) {
+      closeDropdown();
+    } else {
+      openDropdown();
+    }
+  };
+  var clickHandler = function clickHandler(isSelected) {
+    return function (_ref) {
+      var value = _ref.value;
+      setSearchValue('');
+      if (!isSelected) {
+        onItemSelect(value);
+        return;
+      }
+      if (!isRequiredField) {
+        onItemDeselect();
+      }
+    };
+  };
+  var onSearch = function onSearch(e) {
+    setSelectedOption(null);
+    setSearchValue(e.target.value);
+  };
+  var _useGetHasBottomSpace = useGetHasBottomSpace({
+      element: dropdownRef,
+      input: inputRef.current
+    }),
+    hasBottomSpace = _useGetHasBottomSpace.hasBottomSpace;
+  var hasTopSpace = useGetHasTopSpace({
+    element: dropdownRef,
+    input: inputRef.current
+  });
+  useChangePositionsOnScroll({
+    parentElement: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current,
+    childElement: dropdownRef,
+    hasBottomSpace: hasBottomSpace
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "data-id": "".concat(dataId, "-content"),
+    className: classNames("select select--".concat(size), className, {
+      'select--opened': isOpen
+    }),
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement(Input, {
+    onClick: disabled ? noop : onOpenOptions,
+    size: size === 'large' ? 'large' : 'small',
+    dataId: dataId,
+    hasError: hasError,
+    className: "select__input",
+    label: label,
+    onChange: onSearch,
+    required: isRequiredField,
+    leftIconProps: leftIconProps,
+    rightIconProps: isOpen ? selectRightIconOpenedProps : selectRightIconProps,
+    readonly: !searchValue && !isWithSearch,
+    placeholder: placeHolder,
+    value: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || searchValue || '',
+    isValid: isValid,
+    disabled: disabled,
+    helperText: outerHelperText,
+    ref: inputRef,
+    labelAddons: labelAddons,
+    autoComplete: "false"
+  }), isOpen && /*#__PURE__*/React.createElement("div", {
+    className: "select__options",
+    style: _objectSpread({
+      left: left,
+      width: width
+    }, hasBottomSpace || !hasTopSpace ? {
+      top: bottom
+    } : {
+      bottom: window.innerHeight - top + DROPDOWN_AND_INPUT_GAP
+    }),
+    ref: function ref(_ref2) {
+      setDropdownRef(_ref2);
+    }
+  }, isLoading ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement("div", {
+    "data-id": "".concat(dataId, "-options-content"),
+    ref: scrollRef,
+    className: classNames('select__options__scroll', 'scrollbar', 'scrollbar--vertical', {
+      'mr-6': (((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollHeight) || 0) > 300
+    })
+  }, innerHelperText ? /*#__PURE__*/React.createElement("div", {
+    className: "content-top"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "xsmall",
+    type: "secondary",
+    className: "content-top__label"
+  }, innerHelperText)) : null, filteredData.map(function (item) {
+    var isSelected = item.value === currentSelection;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, renderOptions ? renderOptions({
+      key: item.value,
+      onClick: clickHandler(isSelected),
+      data: item,
+      disabled: item.disabled,
+      isSelected: isSelected
+    }) : /*#__PURE__*/React.createElement(OptionItem, {
+      tooltipAddons: tooltipAddons,
+      data: item,
+      key: item.value,
+      onClick: clickHandler(isSelected),
+      optionLeftIcon: item === null || item === void 0 ? void 0 : item.optionLeftIcon,
+      labelLeftIconProps: labelLeftIconProps,
+      OptionRightIconComponent: optionRightIconComponent,
+      LabelRightIconComponent: labelRightIconComponent,
+      avatar: avatar,
+      disabled: item.disabled,
+      isSelected: isSelected
+    }));
+  }))));
+};
+
+export { Select };

package/components/Select/SharedComponents/Actions.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import type { TMenuItem } from '../../Menu/types';
+type TProps = {
+    selectActions: TMenuItem[];
+    innerLabel?: string;
+};
+export declare const Actions: (props: TProps) => JSX.Element | null;
+export {};

package/components/Select/SharedComponents/Actions.js

@@ -0,0 +1,100 @@
+import { _ as _slicedToArray } from '../../../slicedToArray-0c706912.js';
+import React, { useState } from 'react';
+import { Button } from '../../Button/Button.js';
+import { Menu } from '../../Menu/Menu.js';
+import 'react-dom';
+import 'dayjs';
+import '../../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import 'classnames';
+import 'framer-motion';
+import { Text } from '../../Text/Text.js';
+import '../../Collapse/CollapseGroup/CollapseGroup.js';
+import '../../Checkbox/Checkbox.js';
+import 'react-syntax-highlighter';
+import { IconMore } from '../../SVGIcons/IconMore.js';
+import '../../../extends-e8ef956f.js';
+import '../../../defineProperty-7db32082.js';
+import '../../../typeof-ecd92d7f.js';
+import '../../../objectWithoutProperties-fcd64cc7.js';
+import '../../../helperComponents/Loader/Loader.js';
+import '../../Button/consts.js';
+import '../../Popover/Popover.js';
+import '../../../hooks/useGetTooltipStyles.js';
+import '../../../hooks/useGetElemSizes.js';
+import '../../../hooks/useGetElemPositions.js';
+import '../../../hooks/useGetTooltipPosition.js';
+import '../../Tooltip/types.js';
+import '../../../hooks/useHideOnScroll.js';
+import '../../../consts/index.js';
+import '../../../hooks/useOnOutsideClick.js';
+import '../../Link/Link.js';
+import '../../../utils/helpers.js';
+import '../../SVGIcons/IconInfo.js';
+import '../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../../helperComponents/IconDynamicComponent/constants.js';
+import '../../../helperComponents/OptionItem/OptionItem.js';
+import '../../Avatar/Avatar.js';
+import '../../FileUpload/FileUpload.js';
+import '../../../toConsumableArray-e0031ed3.js';
+import '../../FileUpload/types.js';
+import '../../../helperComponents/Label/Label.js';
+import '../../FileUpload/UploadItems.js';
+import '../../../hooks/useFormProps.js';
+import '../../../context/types.js';
+import '../../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../../SVGIcons/IconDelete.js';
+import '../../SVGIcons/IconEditFilled.js';
+import '../../SVGIcons/IconEdit.js';
+import '../../SVGIcons/IconAttach.js';
+import '../../Tooltip/Tooltip.js';
+import '../../SVGIcons/IconCheckmark.js';
+import '../../Collapse/CollapseItem/CollapseItem.js';
+import '../../SVGIcons/IconChevronRight.js';
+import '../../Divider/Divider.js';
+import '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
+import '../../SVGIcons/IconChevronDown.js';
+
+var Actions = function Actions(props) {
+  var selectActions = props.selectActions,
+    innerLabel = props.innerLabel;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMenuOpen = _useState2[0],
+    setIsMenuOpen = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    buttonRef = _useState4[0],
+    setButtonRef = _useState4[1];
+  var open = function open() {
+    return setIsMenuOpen(true);
+  };
+  var close = function close() {
+    return setIsMenuOpen(false);
+  };
+  return selectActions.length ? /*#__PURE__*/React.createElement("div", {
+    className: "action-bar"
+  }, innerLabel ? /*#__PURE__*/React.createElement(Text, {
+    size: "xsmall",
+    type: "secondary",
+    className: "action-bar__label"
+  }, innerLabel) : null, /*#__PURE__*/React.createElement("div", {
+    ref: setButtonRef,
+    className: "action-bar__right"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "tertiary",
+    onClick: open,
+    iconProps: {
+      Component: IconMore
+    },
+    size: "small"
+  }), buttonRef ? /*#__PURE__*/React.createElement(Menu, {
+    menuItems: selectActions,
+    parentRef: buttonRef,
+    onClose: close,
+    position: "bottom-left",
+    isOpen: isMenuOpen
+  }) : null)) : null;
+};
+
+export { Actions };

package/components/Select/SharedComponents/ButtonSelectWrapper/Button/Button.d.ts

@@ -0,0 +1,15 @@
+import type { LegacyRef, ReactElement } from 'react';
+type TProps = {
+    buttonText: string;
+    size?: 'small' | 'medium' | 'large';
+    className?: string;
+    disabled?: boolean;
+    dataId?: string;
+    onClick: () => void;
+    refHandler?: LegacyRef<HTMLButtonElement> | undefined;
+    selectedItemsLabels: string;
+    isOpen?: boolean;
+    type?: 'primary' | 'secondary' | 'tertiary';
+};
+export declare const Button: (props: TProps) => ReactElement;
+export {};

package/components/Select/SharedComponents/ButtonSelectWrapper/Button/Button.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Text } from '../../../../Text/Text.js';
+import { IconCaretDownFilled } from '../../../../SVGIcons/IconCaretDownFilled.js';
+import { IconCaretUpFilled } from '../../../../SVGIcons/IconCaretUpFilled.js';
+import '../../../../../utils/helpers.js';
+import 'dayjs';
+import '../../../../../defineProperty-7db32082.js';
+import '../../../../../typeof-ecd92d7f.js';
+
+var Button = function Button(props) {
+  var type = props.type,
+    buttonText = props.buttonText,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'large' : _props$size,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    isOpen = props.isOpen,
+    disabled = props.disabled,
+    _props$dataId = props.dataId,
+    dataId = _props$dataId === void 0 ? '' : _props$dataId,
+    onClick = props.onClick,
+    _props$refHandler = props.refHandler,
+    refHandler = _props$refHandler === void 0 ? null : _props$refHandler,
+    selectedItemsLabels = props.selectedItemsLabels;
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    ref: refHandler,
+    "data-id": dataId,
+    disabled: disabled,
+    className: classNames('btn', "btn--".concat(type), "btn--".concat(size), "btn--".concat(size), className),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    className: "btn__text mr-4",
+    type: selectedItemsLabels ? 'tertiary' : 'secondary'
+  }, "".concat(buttonText).concat(selectedItemsLabels ? '  |' : '')), selectedItemsLabels ? /*#__PURE__*/React.createElement(Text, {
+    className: "btn__text ml-4"
+  }, selectedItemsLabels) : null, isOpen ? /*#__PURE__*/React.createElement(IconCaretUpFilled, {
+    size: "xsmall"
+  }) : /*#__PURE__*/React.createElement(IconCaretDownFilled, {
+    size: "xsmall"
+  })));
+};
+
+export { Button };

package/components/Select/SharedComponents/ButtonSelectWrapper/ButtonSelectWrapper.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement } from 'react';
+import type { TSelectWrapperProps } from '../../types';
+export declare const ButtonSelectWrapper: (props: TSelectWrapperProps) => ReactElement;