@zohodesk/components 1.0.0-temp-220.11 → 1.0.0-temp-230

package/README.md

@@ -2,6 +2,39 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.4.8
+
+  - `ColorSingleSelect`, `ColorMultiSelect`, `InputFieldLine`, `ColoredTag` and `ColorIndicator` components added.
+  
+- **ListItem, Suggestions**
+  - `renderBeforeChildren` prop added.
+
+- **Select, MultiSelect, SelectedOptions**
+ - `renderCustomSelectedValue` prop added.
+
+- **dropDownUtils**
+ - `colorCode` option added in makeFormatOptions method.
+
+- **common/utils**
+ - `DUMMY_ARRAY`, `DUMMY_OBJECT` and `DUMMY_FUNCTION` constants added.
+
+# 1.4.8
+
+- Added UNSAFE_ prefix to deprecated lifecycle methods: componentWillMount, componentWillReceiveProps, and componentWillUpdate.
+
+- **Popup**
+  - Handled potential memory leaks by `event listeners`.
+  - Added unmount handling for `requestAnimationFrame` to ensure proper cleanup.
+
+
+# 1.4.7
+
+- **Card** - Added support for reverse infinite scroll with `isRecentOnBottom`.
+
+# 1.4.6
+
+- **Popup** -  Added fixed popup scroll block behavior support to iframe elements (same-origin only).
+
 # 1.4.5
 
 - **Portal**
@@ -10,7 +43,6 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 
 - **Popup**
   - Fixed the auto-repositioning issue during fixed popup resize and improved the position calculation logic.
-  - Added fixed popup scroll block behavior support to iframe elements (same-origin only).
 
 - **Modal**
   - Refactored to use the new `Portal` component for rendering, resolving unwanted rendering issues.

package/assets/Appearance/dark/mode/Component_DarkMode.module.css

@@ -361,4 +361,12 @@
 	
 	/* popover */
 	--zdt_popover_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* inputFieldLine */
+	--zdt_inputField_default_border: var(--dot_inputLine);
+	--zdt_inputField_dark_border: hsla(228, 16.20%, calc(35.10% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_inputField_error_border: hsla(1, 63.86%, calc(48.82% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_inputField_hover_border: var(--dot_inputLineHover);
+	--zdt_inputField_dark_active_border: hsla(229, 8.25%, calc(61.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_inputField_focus_border: var(--dot_inputLineFocus);
 }

package/assets/Appearance/light/mode/Component_LightMode.module.css

@@ -361,4 +361,12 @@
 	
 	/* popover */
 	--zdt_popover_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* inputFieldLine */
+	--zdt_inputField_default_border: var(--dot_inputLine);
+	--zdt_inputField_dark_border: hsla(228, 16.20%, calc(35.10% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_inputField_error_border: hsla(1, 75.38%, calc(38.24% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_inputField_hover_border: var(--dot_inputLineHover);
+	--zdt_inputField_dark_active_border: hsla(229, 8.25%, calc(61.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_inputField_focus_border: var(--dot_inputLineFocus);
 }

package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css

@@ -361,4 +361,12 @@
 	
 	/* popover */
 	--zdt_popover_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* inputFieldLine */
+	--zdt_inputField_default_border: var(--dot_inputLine);
+	--zdt_inputField_dark_border: hsla(228, 16.20%, calc(35.10% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_inputField_error_border: hsla(1, 63.86%, calc(48.82% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_inputField_hover_border: var(--dot_inputLineHover);
+	--zdt_inputField_dark_active_border: hsla(229, 8.25%, calc(61.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_inputField_focus_border: var(--dot_inputLineFocus);
 }

package/es/Accordion/Accordion.js

@@ -25,7 +25,7 @@ export default class Accordion extends React.Component {
     });
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.selectedItem !== nextProps.selectedItem && !this.props.disableInternalState) {
       this.setState({
         selectedItem: nextProps.selectedItem

package/es/AppContainer/AppContainer.js

@@ -8,7 +8,7 @@ import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
 import '@zohodesk/variables/assets/fontsizeVariables.module.css';
-import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
+import '@zohodesk/variables/es/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
 import "../common/a11y.module.css";

package/es/Card/Card.js

@@ -96,11 +96,13 @@ export default class Card extends Component {
     this.to = from + 3 * limit;
     this.isFetching = false;
     this.lastScrollTop = 0;
-    this.onScroll = this.onScroll.bind(this); //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
+    this.onScroll = this.onScroll.bind(this);
+    this.setScrollRef = this.setScrollRef.bind(this);
+    this.childEleRef = null; //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
     //this.onClearScroll = debounce(this.setScroll.bind(this, false), 500);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.from !== nextProps.from) {
       this.from = nextProps.from;
     }
@@ -127,25 +129,36 @@ export default class Card extends Component {
       scrollAt,
       noNeedUpScroll,
       // isScrollShadow,
-      isPercentageScroll
+      isPercentageScroll,
+      scrollDirection
     } = this.props;
+    const scrollLimitHeight = scrollHeight - scrollAt;
+    const currentVisibleBottom = scrollTop + offsetHeight;
 
     if (scrollTop > this.lastScrollTop) {
-      this.scrollDirection = 'down';
+      this.scrollingDirection = 'down';
     } else {
-      this.scrollDirection = 'up';
+      this.scrollingDirection = 'up';
     }
 
     this.lastScrollTop = scrollTop;
 
     if (fetchData && !this.isFetching) {
-      if (this.scrollDirection === 'down' && !noMoreData) {
-        const scrollingPercentage = (scrollTop + offsetHeight) / (scrollHeight - scrollAt) * 100;
-        const prefetch = isPercentageScroll ? scrollingPercentage >= getLibraryConfig('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight;
+      const fetchDirection = scrollDirection === 'bottomToTop' ? 'up' : 'down';
+
+      if (this.scrollingDirection === fetchDirection && !noMoreData) {
+        let prefetch = false;
+
+        if (isPercentageScroll) {
+          const scrollingPercentage = scrollDirection === 'bottomToTop' ? (scrollHeight - scrollTop) / scrollLimitHeight * 100 : currentVisibleBottom / scrollLimitHeight * 100;
+          prefetch = scrollingPercentage >= getLibraryConfig('scrollFetchLimit');
+        } else {
+          prefetch = scrollDirection === 'bottomToTop' ? scrollTop <= scrollAt : scrollLimitHeight <= currentVisibleBottom;
+        }
 
         if (prefetch) {
           this.isFetching = true;
-          fetchData(this.from + this.limit, this.limit + this.to, this.scrollDirection).then(() => {
+          fetchData(this.from + this.limit, this.limit + this.to, this.scrollingDirection).then(() => {
             this.to = this.limit + this.to;
             this.isFetching = false;
           }, () => {
@@ -153,9 +166,11 @@ export default class Card extends Component {
           });
         }
       } else {
-        if (0 >= scrollTop - scrollAt && this.from !== 0 && !noNeedUpScroll) {
+        const prefetch = scrollDirection === 'bottomToTop' ? scrollLimitHeight <= currentVisibleBottom : 0 >= scrollTop - scrollAt;
+
+        if (prefetch && this.from !== 0 && !noNeedUpScroll) {
           this.isFetching = true;
-          fetchData(this.from - this.limit, this.to - this.limit, this.scrollDirection).then(() => {
+          fetchData(this.from - this.limit, this.to - this.limit, this.scrollingDirection).then(() => {
             this.to = this.to - this.limit;
             this.isFetching = false;
           }, () => {
@@ -166,9 +181,12 @@ export default class Card extends Component {
     }
 
     if (fetchData && !noNeedUpScroll) {
-      if (this.from !== 0 && scrollTop === 0 && !noNeedUpScroll) {
+      const topFetch = scrollDirection === 'bottomToTop' ? !noMoreData : !noNeedUpScroll && this.from !== 0;
+      const bottomFetch = scrollDirection === 'bottomToTop' ? !noNeedUpScroll && this.from !== 0 : !noMoreData;
+
+      if (scrollTop === 0 && topFetch) {
         scrollContainerObj.scrollTop = scrollTop + offsetHeight / 3;
-      } else if (scrollHeight === scrollTop + offsetHeight && !noMoreData) {
+      } else if (scrollHeight === currentVisibleBottom && bottomFetch) {
         scrollContainerObj.scrollTop = scrollTop - offsetHeight / 2;
       }
     } // if (isScrollShadow) {
@@ -187,6 +205,21 @@ export default class Card extends Component {
   // }
 
 
+  setScrollRef(el) {
+    const {
+      scrollAt,
+      scrollDirection
+    } = this.props;
+
+    if (el && scrollDirection === 'bottomToTop') {
+      requestAnimationFrame(() => {
+        el.scrollTop = el.scrollHeight + Number(scrollAt);
+      });
+    }
+
+    this.childEleRef && this.childEleRef(el);
+  }
+
   render() {
     let {
       onClick,
@@ -220,6 +253,7 @@ export default class Card extends Component {
           isScroll
         });
       } else if (child.type === CardContent || this.props.childTypes && child.type === this.props.childTypes.cardContent) {
+        this.childEleRef = child.props.eleRef;
         return /*#__PURE__*/React.createElement(Box, {
           id: htmlId,
           role: role,
@@ -227,7 +261,7 @@ export default class Card extends Component {
           scroll: child.props.scroll,
           preventParentScroll: child.props.preventParentScroll,
           onScroll: this.onScroll,
-          eleRef: child.props.eleRef,
+          eleRef: this.setScrollRef,
           isScrollAttribute: child.props.isScrollAttribute,
           dataId: child.props.dataId,
           shrink: child.props.shrink,

package/es/Card/__tests__/Card.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import Card from "../Card";
+import { render, fireEvent, within, waitFor } from '@testing-library/react';
+import Card, { CardContent } from "../Card";
 describe('Card', () => {
   test('rendering the defult props', () => {
     const {
@@ -8,4 +8,83 @@ describe('Card', () => {
     } = render( /*#__PURE__*/React.createElement(Card, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false', async () => {
+    const mockGetNextOptions = jest.fn(() => {
+      return new Promise(resolve => {
+        resolve();
+      });
+    });
+    const {
+      getByTestId,
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      from: 0,
+      limit: 10,
+      fetchData: mockGetNextOptions
+    }, /*#__PURE__*/React.createElement(CardContent, {
+      dataId: "scrollToBottomCardContent"
+    }, /*#__PURE__*/React.createElement("div", null, "Hello Zam"))));
+    const cardContent = getByTestId('scrollToBottomCardContent');
+    Object.defineProperty(cardContent, 'scrollHeight', {
+      value: 1000,
+      writable: true
+    });
+    Object.defineProperty(cardContent, 'clientHeight', {
+      value: 600,
+      writable: true
+    });
+    Object.defineProperty(cardContent, 'offsetHeight', {
+      value: 600,
+      writable: true
+    });
+    fireEvent.scroll(cardContent, {
+      target: {
+        scrollTop: 401
+      }
+    });
+    await waitFor(() => {
+      expect(asFragment()).toMatchSnapshot();
+      expect(mockGetNextOptions).toHaveBeenCalledWith(10, 40, 'down');
+    });
+  });
+  test('should trigger fetch, when scroll to the top of the card while scrollDirection = bottomToTop', async () => {
+    const mockGetNextOptions = jest.fn(() => {
+      return new Promise(resolve => {
+        resolve();
+      });
+    });
+    const {
+      getByTestId,
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      from: 0,
+      limit: 10,
+      scrollDirection: "bottomToTop",
+      fetchData: mockGetNextOptions
+    }, /*#__PURE__*/React.createElement(CardContent, {
+      dataId: "scrollToTopCardContent"
+    }, /*#__PURE__*/React.createElement("div", null, "Hello Zam"))));
+    const cardContent = getByTestId('scrollToTopCardContent');
+    Object.defineProperty(cardContent, 'scrollHeight', {
+      value: 1000,
+      writable: true
+    });
+    Object.defineProperty(cardContent, 'clientHeight', {
+      value: 600,
+      writable: true
+    });
+    Object.defineProperty(cardContent, 'offsetHeight', {
+      value: 600,
+      writable: true
+    });
+    fireEvent.scroll(cardContent, {
+      target: {
+        scrollTop: 0
+      }
+    });
+    await waitFor(() => {
+      expect(asFragment()).toMatchSnapshot();
+      expect(mockGetNextOptions).toHaveBeenCalledWith(10, 40, 'up');
+    });
+  });
 });

package/es/Card/__tests__/__snapshots__/Card.spec.js.snap

@@ -10,3 +10,47 @@ exports[`Card rendering the defult props 1`] = `
   />
 </DocumentFragment>
 `;
+
+exports[`Card should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="scrollToBottomCardContent"
+      data-selector-id="cardContent"
+      data-test-id="scrollToBottomCardContent"
+    >
+      <div>
+        Hello Zam
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card should trigger fetch, when scroll to the top of the card while scrollDirection = bottomToTop 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="scrollToTopCardContent"
+      data-selector-id="cardContent"
+      data-test-id="scrollToTopCardContent"
+    >
+      <div>
+        Hello Zam
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/Card/props/defaultProps.js

@@ -4,7 +4,8 @@ export const Card_defaultProps = {
   onClick: null,
   scrollAt: '10',
   a11y: {},
-  isPercentageScroll: false
+  isPercentageScroll: false,
+  scrollDirection: 'topToBottom'
 };
 export const CardHeader_defaultProps = {
   dataId: 'CardHeader',

package/es/Card/props/propTypes.js

@@ -38,7 +38,8 @@ export const Card_propTypes = {
     role: PropTypes.string
   }),
   isPercentageScroll: PropTypes.bool,
-  eleRef: PropTypes.func
+  eleRef: PropTypes.func,
+  scrollDirection: PropTypes.oneOf(['topToBottom', 'bottomToTop'])
 };
 export const CardFooter_propTypes = {
   children: PropTypes.node,

package/es/ColorSelect/ColorMultiSelect.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import MultiSelect from "../MultiSelect/MultiSelect";
+import { ColorMultiSelect_propTypes } from "./props/propTypes";
+import { ColorMultiSelect_defaultProps } from "./props/defaultProps";
+import { renderColoredTag, renderColorIndicator } from "./common/helpers";
+
+function ColorMultiSelect(props) {
+  const {
+    options,
+    renderCustomColorIndicator,
+    renderCustomSelectedValue,
+    customProps,
+    ...rest
+  } = props;
+  const renderSelectedValue = renderCustomSelectedValue || renderColoredTag;
+  const colorIndicator = renderCustomColorIndicator || renderColorIndicator;
+  const optionsWithOptionType = options.map(option => {
+    if (typeof option !== 'object') return option;
+    return { ...option,
+      optionType: 'custom'
+    };
+  });
+  return /*#__PURE__*/React.createElement(MultiSelect, { ...rest,
+    options: optionsWithOptionType,
+    renderCustomSelectedValue: renderSelectedValue,
+    customProps: { ...customProps,
+      SuggestionsProps: { ...customProps.SuggestionsProps,
+        renderBeforeChildren: colorIndicator
+      }
+    }
+  });
+}
+
+ColorMultiSelect.propTypes = ColorMultiSelect_propTypes;
+ColorMultiSelect.defaultProps = ColorMultiSelect_defaultProps;
+export default ColorMultiSelect;

package/es/ColorSelect/ColorSingleSelect.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import Select from "../Select/Select";
+import { ColorSingleSelect_propTypes } from "./props/propTypes";
+import { ColorSingleSelect_defaultProps } from "./props/defaultProps";
+import { renderColoredTag, renderColorIndicator } from "./common/helpers";
+import Box from "../Layout/Box";
+import Container from "../Layout/Container";
+import ArrowIcon from "../Select/ArrowIcon/ArrowIcon";
+import arrowIconStyle from "../Select/ArrowIcon/ArrowIcon.module.css";
+
+function ColorSingleSelect(props) {
+  const {
+    options,
+    renderCustomColorIndicator,
+    renderCustomSelectedValue,
+    customClass,
+    customProps,
+    ...rest
+  } = props;
+
+  const renderSelectedValue = data => {
+    const {
+      isPopupOpen
+    } = data;
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "between"
+    }, /*#__PURE__*/React.createElement(Box, {
+      shrink: true
+    }, renderCustomSelectedValue ? renderCustomSelectedValue(data) : renderColoredTag(data)), /*#__PURE__*/React.createElement(ArrowIcon, {
+      isRotated: isPopupOpen
+    }));
+  };
+
+  const colorIndicator = renderCustomColorIndicator || renderColorIndicator;
+  return /*#__PURE__*/React.createElement(Select, { ...rest,
+    className: `${arrowIconStyle.arrowIconContainer} ${customClass}`,
+    options: options,
+    renderCustomSelectedValue: renderSelectedValue,
+    customProps: { ...customProps,
+      SuggestionsProps: { ...customProps.SuggestionsProps,
+        renderBeforeChildren: colorIndicator
+      }
+    }
+  });
+}
+
+ColorSingleSelect.propTypes = ColorSingleSelect_propTypes;
+ColorSingleSelect.defaultProps = ColorSingleSelect_defaultProps;
+export default ColorSingleSelect;

package/es/ColorSelect/__tests__/ColorMultiSelect.spec.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ColorMultiSelect from "../ColorMultiSelect";
+const options = [{
+  id: 1,
+  text: 'Red',
+  colorCode: '#ff6e6e'
+}, {
+  id: 2,
+  text: 'Green',
+  colorCode: '#77d779'
+}, {
+  id: 3,
+  text: 'Blue',
+  colorCode: '#649cff'
+}];
+describe('ColorMultiSelect', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorMultiSelect, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render the default selected value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorMultiSelect, {
+      options: options
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render the selected value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorMultiSelect, {
+      options: options,
+      selectedOptions: [1, 2]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with renderCustomColorIndicator', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorMultiSelect, {
+      options: options,
+      renderCustomColorIndicator: () => /*#__PURE__*/React.createElement("div", null, " custom color indicator")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with renderCustomSelectedValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorMultiSelect, {
+      options: options,
+      renderCustomSelectedValue: () => /*#__PURE__*/React.createElement("span", null, "custom selected value")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/ColorSelect/__tests__/ColorSingleSelect.spec.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ColorSingleSelect from "../ColorSingleSelect";
+const options = [{
+  id: 1,
+  text: 'Red',
+  colorCode: '#ff6e6e'
+}, {
+  id: 2,
+  text: 'Green',
+  colorCode: '#77d779'
+}, {
+  id: 3,
+  text: 'Blue',
+  colorCode: '#649cff'
+}];
+describe('ColorSingleSelect', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorSingleSelect, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render the default selected value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorSingleSelect, {
+      options: options
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render the selected value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorSingleSelect, {
+      options: options,
+      selectedValue: "green"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with renderCustomColorIndicator', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorSingleSelect, {
+      options: options,
+      renderCustomColorIndicator: () => /*#__PURE__*/React.createElement("div", null, " custom color indicator")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with renderCustomSelectedValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorSingleSelect, {
+      options: options,
+      renderCustomSelectedValue: () => /*#__PURE__*/React.createElement("span", null, "custom selected value")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});