@zohodesk/components 1.4.21 → 1.4.22

package/README.md

@@ -2,6 +2,35 @@
 
 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.22
+
+- **New Components**
+  - ColorSingleSelect
+  - ColorMultiSelect
+
+- **Components in Shared folder**
+  - InputFieldLine
+  - ArrowIcon
+
+- **Components in ColorSelect's _shared**
+  - ColoredTag
+  - ColorIndicator
+
+- **TextBoxIcon**
+  - `InputFieldLine` adopted in TextBoxIcon
+  
+- **ListItem, Suggestions**
+  - `renderBeforeChildren` prop added.
+
+- **Select, MultiSelect, SelectedOptions**
+ - `renderCustomSelectedValue` prop added.
+
+- **dropDownUtils**
+ - `colorConfig` option added in makeFormatOptions method.
+
+- **common/utils**
+ - `DUMMY_ARRAY`, `DUMMY_OBJECT` and `DUMMY_FUNCTION` constants added.
+ 
 # 1.4.21
 
 - `Common Css`

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

@@ -365,4 +365,19 @@
 	
 	/* 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);
+	
+	/* arrowIcon */
+	--zdt_arrowicon_default_icon: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_arrowicon_hover_icon: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* colorSelect */
+	--zdt_colorSelect_placeholder_text: var(--dot_inputPlaceholder);
 }

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

@@ -365,4 +365,19 @@
 	
 	/* 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);
+	
+	/* arrowIcon */
+	--zdt_arrowicon_default_icon: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_arrowicon_hover_icon: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* colorSelect */
+	--zdt_colorSelect_placeholder_text: var(--dot_inputPlaceholder);
 }

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

@@ -365,4 +365,19 @@
 	
 	/* 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);
+	
+	/* arrowIcon */
+	--zdt_arrowicon_default_icon: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_arrowicon_hover_icon: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* colorSelect */
+	--zdt_colorSelect_placeholder_text: var(--dot_inputPlaceholder);
 }

package/es/ColorSelect/ColorMultiSelect.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import MultiSelect from "../MultiSelect/MultiSelect";
+import { ColorMultiSelect_propTypes } from "./props/propTypes";
+import { ColorMultiSelect_defaultProps } from "./props/defaultProps";
+import { renderColoredTag, renderColorIndicator } from "./_shared/helpers/renderHelpers";
+
+function ColorMultiSelect(props) {
+  const {
+    options,
+    renderCustomColorIndicator,
+    renderCustomSelectedValue,
+    customProps,
+    ...rest
+  } = props;
+  const renderSelectedValue = renderCustomSelectedValue || renderColoredTag;
+  const colorIndicator = renderCustomColorIndicator || renderColorIndicator;
+  const optionsWithOptionType = useMemo(() => {
+    return options.map(option => {
+      if (typeof option !== "object") return option;
+      return { ...option,
+        optionType: "custom"
+      };
+    });
+  }, [options]);
+  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/ColorSelect.module.css

@@ -0,0 +1,3 @@
+.placeholder {
+  color: var(--zdt_colorSelect_placeholder_text);
+}

package/es/ColorSelect/ColorSingleSelect.js

@@ -0,0 +1,83 @@
+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 "./_shared/helpers/renderHelpers";
+import Box from "../Layout/Box";
+import Container from "../Layout/Container";
+import ArrowIcon from "../shared/ArrowIcon/ArrowIcon";
+import Typography from "../Typography/Typography";
+import arrowIconStyle from "../shared/ArrowIcon/ArrowIcon.module.css";
+import style from "./ColorSelect.module.css";
+const fontSizes = {
+  xmedium: '14',
+  medium: '14',
+  small: '12',
+  xsmall: '13'
+};
+
+function ColorSingleSelect(props) {
+  const {
+    options,
+    renderCustomColorIndicator,
+    renderCustomSelectedValue,
+    customClass,
+    customProps,
+    borderColor,
+    children,
+    dataId,
+    renderRightPlaceholderNode,
+    placeholder,
+    renderCustomToggleIndicator,
+    ...rest
+  } = props;
+  const {
+    select: selectClass
+  } = customClass;
+
+  function renderSelectedValue(data) {
+    const {
+      isPopupOpen,
+      selectedId,
+      isDisabled,
+      isReadOnly
+    } = data;
+    const {
+      size
+    } = props;
+    const fontSize = fontSizes[size] || 14;
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row"
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, selectedId ? renderCustomSelectedValue ? renderCustomSelectedValue(data) : renderColoredTag(data) : /*#__PURE__*/React.createElement(Typography, {
+      $ui_size: fontSize,
+      $ui_className: `${style.placeholder}`,
+      $flag_dotted: true
+    }, placeholder)), /*#__PURE__*/React.createElement(ArrowIcon, {
+      isRotated: isPopupOpen,
+      isDisabled: isDisabled,
+      isReadOnly: isReadOnly,
+      renderCustomToggleIndicator: renderCustomToggleIndicator
+    }), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
+  }
+
+  const colorIndicator = renderCustomColorIndicator || renderColorIndicator;
+  return /*#__PURE__*/React.createElement(Select, { ...rest,
+    placeHolder: placeholder,
+    dataId: dataId,
+    borderColor: borderColor,
+    className: `${borderColor === 'transparent' ? arrowIconStyle.transparentContainer : ''} ${arrowIconStyle.arrowContainer} ${selectClass ? selectClass : ''}`,
+    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,71 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ColorMultiSelect from "../ColorMultiSelect";
+const options = [{
+  id: 1,
+  text: 'Red',
+  colorConfig: {
+    text: 'black',
+    background: '#ff6e6e',
+    border: 'black'
+  }
+}, {
+  id: 2,
+  text: 'Green',
+  colorConfig: {
+    text: 'black',
+    background: '#77d779',
+    border: 'black'
+  }
+}, {
+  id: 3,
+  text: 'Blue',
+  colorConfig: {
+    text: 'black',
+    background: '#649cff',
+    border: 'black'
+  }
+}];
+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,80 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ColorSingleSelect from "../ColorSingleSelect";
+const options = [{
+  id: 1,
+  text: 'Red',
+  colorConfig: {
+    text: 'black',
+    background: '#ff6e6e',
+    border: 'black'
+  }
+}, {
+  id: 2,
+  text: 'Green',
+  colorConfig: {
+    text: 'black',
+    background: '#77d779',
+    border: 'black'
+  }
+}, {
+  id: 3,
+  text: 'Blue',
+  colorConfig: {
+    text: 'black',
+    background: '#649cff',
+    border: 'black'
+  }
+}];
+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('rendering with isDefaultSelectValue is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ColorSingleSelect, {
+      isDefaultSelectValue: false,
+      placeholder: "placeholder Text"
+    }));
+    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();
+  });
+});