@zohodesk/components 1.0.0-temp-236 → 1.0.0-temp-238

package/es/v1/DateTime/props/propTypes.js

@@ -0,0 +1,206 @@
+import PropTypes from 'prop-types';
+import { dataFormatList } from "../../../DateTime/dateFormatUtils/dateFormats";
+export const CalendarView_propTypes = {
+  dataId: PropTypes.string,
+  date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  month: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  needBorder: PropTypes.bool,
+  onSelect: PropTypes.func,
+  year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  dayNames: PropTypes.array,
+  dayNamesShort: PropTypes.array,
+  todayMonth: PropTypes.string,
+  todayDate: PropTypes.string,
+  todayYear: PropTypes.string,
+  startDate: PropTypes.string,
+  endDate: PropTypes.string,
+  weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: PropTypes.arrayOf(PropTypes.number)
+};
+export const Span_propTypes = {
+  dataId: PropTypes.string,
+  handleSelect: PropTypes.func,
+  i: PropTypes.number,
+  incremday: PropTypes.number,
+  isActive: PropTypes.bool,
+  tdclass: PropTypes.string,
+  userSeeMonth: PropTypes.number,
+  userSeeYear: PropTypes.number,
+  isToday: PropTypes.bool,
+  startDate: PropTypes.string,
+  endDate: PropTypes.string
+};
+export const DateTime_propTypes = {
+  boxSize: PropTypes.string,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dateFormat: PropTypes.string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  defaultTime: PropTypes.string,
+  getMethods: PropTypes.func,
+  getRef: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    timeText: PropTypes.string.isRequired,
+    submitText: PropTypes.string.isRequired,
+    cancelText: PropTypes.string.isRequired,
+    hourEmptyText: PropTypes.string.isRequired,
+    minuteEmptyText: PropTypes.string.isRequired,
+    nextMonthTitleText: PropTypes.string.isRequired,
+    prevMonthTitleText: PropTypes.string.isRequired
+  }),
+  innerClass: PropTypes.string,
+  isAbsolute: PropTypes.bool,
+  isActive: PropTypes.bool,
+  isAnimate: PropTypes.bool,
+  isDateTimeField: PropTypes.bool,
+  isPadding: PropTypes.bool,
+  isReady: PropTypes.bool,
+  max: PropTypes.string,
+  maxErrorText: PropTypes.string,
+  min: PropTypes.string,
+  minErrorText: PropTypes.string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  needAction: PropTypes.bool,
+  needDefaultTime: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  onChange: PropTypes.func,
+  onClear: PropTypes.func,
+  onClick: PropTypes.func,
+  onDateSelect: PropTypes.func,
+  onError: PropTypes.func,
+  onSelect: PropTypes.func,
+  position: PropTypes.string,
+  timeZone: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  is24Hour: PropTypes.bool,
+  isDefaultPosition: PropTypes.bool,
+  customDateFormat: PropTypes.string,
+  positionsOffset: PropTypes.array,
+  targetOffset: PropTypes.string,
+  isRestrictScroll: PropTypes.bool,
+  dropBoxPortalId: PropTypes.string,
+  startDate: PropTypes.string,
+  endDate: PropTypes.string,
+  customProps: PropTypes.object,
+  weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: PropTypes.arrayOf(PropTypes.number)
+};
+export const DateWidget_propTypes = {
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  cantEditOnPopupOpen: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  closePopupOnly: PropTypes.func,
+  dataId: PropTypes.string,
+  dateFormat: PropTypes.oneOf([...dataFormatList]),
+  defaultPosition: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+  defaultTime: PropTypes.string,
+  getContainerRef: PropTypes.func,
+  getMethods: PropTypes.func,
+  getRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  i18nKeys: PropTypes.object,
+  id: PropTypes.string,
+  isDateTime: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isEditable: PropTypes.bool,
+  isPopupCloseOnClick: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupOpenOnClick: PropTypes.bool,
+  isPopupOpenOnEnter: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  max: PropTypes.string,
+  maxErrorText: PropTypes.string,
+  min: PropTypes.string,
+  minErrorText: PropTypes.string,
+  needBorder: PropTypes.bool,
+  needDefaultTime: PropTypes.bool,
+  needErrorOnBlur: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  onFailValidation: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onPassValidation: PropTypes.func,
+  onSelect: PropTypes.func,
+  placeholder: PropTypes.string,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  textBoxSize: PropTypes.string,
+  textBoxVariant: PropTypes.string,
+  timeZone: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  togglePopup: PropTypes.func,
+  validation: PropTypes.shape({
+    validate: PropTypes.bool,
+    validateOn: PropTypes.string,
+    rulesOrder: PropTypes.arrayOf(PropTypes.string),
+    rules: PropTypes.object,
+    messages: PropTypes.object
+  }),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  htmlId: PropTypes.string,
+  iconOnHover: PropTypes.bool,
+  is24Hour: PropTypes.bool,
+  isHideCurrentYear: PropTypes.bool,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  boxSize: PropTypes.string,
+  onError: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  positionsOffset: PropTypes.array,
+  targetOffset: PropTypes.array,
+  isRestrictScroll: PropTypes.bool,
+  dropBoxPortalId: PropTypes.string,
+  a11y: PropTypes.object,
+  startDate: PropTypes.string,
+  endDate: PropTypes.string,
+  getPopupProps: PropTypes.func,
+  customProps: PropTypes.object,
+  weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: PropTypes.arrayOf(PropTypes.number)
+};
+export const YearView_propTypes = {
+  onSelectMonth: PropTypes.func,
+  onSelectYear: PropTypes.func,
+  viewedYear: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  viewedMonth: PropTypes.string,
+  monthNamesShort: PropTypes.array,
+  isMonthOpen: PropTypes.bool
+};
+export const DateTimePopupFooter_propTypes = {
+  submitText: PropTypes.string,
+  onSubmit: PropTypes.func,
+  cancelText: PropTypes.string,
+  onCancel: PropTypes.func,
+  dataId: PropTypes.string
+};
+export const DateTimePopupHeader_propTypes = {
+  onOpenYearView: PropTypes.func,
+  showMonthTxt: PropTypes.string,
+  isYearView: PropTypes.bool,
+  prevMonthTitleText: PropTypes.string,
+  nextMonthTitleText: PropTypes.string,
+  onModifyCalendar: PropTypes.func
+};
+export const DaysRow_propTypes = {
+  dayNames: PropTypes.array,
+  dayNamesShort: PropTypes.object,
+  holidays: PropTypes.arrayOf(PropTypes.number)
+};
+export const Time_propTypes = {
+  timeText: PropTypes.string,
+  dataId: PropTypes.string,
+  hourSuggestions: PropTypes.array,
+  onHourSelect: PropTypes.func,
+  hours: PropTypes.string,
+  hourEmptyText: PropTypes.string,
+  needResponsive: PropTypes.bool,
+  minSuggestions: PropTypes.array,
+  onMinutesSelect: PropTypes.func,
+  mins: PropTypes.string,
+  minuteEmptyText: PropTypes.string,
+  ampmSuggestions: PropTypes.array,
+  onAmPmSelect: PropTypes.func,
+  amPm: PropTypes.string,
+  is24Hour: PropTypes.bool,
+  customProps: PropTypes.object
+};

package/es/v1/DropBox/DropBox.js

@@ -0,0 +1,79 @@
+import React, { useRef, useContext } from 'react';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
+import Modal from "../Modal/Modal";
+import LibraryContext from "../../Provider/LibraryContextInit";
+import cssJSLogic from "../../DropBox/css/cssJSLogic";
+import DropBoxElement from "./DropBoxElement/DropBoxElement";
+import { DropBoxDefaultProps } from "./props/defaultProps";
+import { DropBoxPropTypes } from "./props/propTypes";
+import { stopPropagation } from "../../utils/Common";
+import isMobilePopover from "./utils/isMobilePopover";
+import style from "../../DropBox/css/DropBox.module.css";
+export default function DropBox(props) {
+  const dropBoxRef = useRef(null);
+  const DropBoxContext = useContext(LibraryContext);
+  const {
+    needResponsive,
+    portalId,
+    isActive,
+    isAbsolutePositioningNeeded,
+    isRestrictScroll,
+    needFocusScope,
+    onClose,
+    customProps
+  } = props;
+  const {
+    focusScopeProps = {}
+  } = customProps;
+  const {
+    needAutoFocus = true,
+    needRestoreFocus = true,
+    needListNavigation = true,
+    needFocusLoop = false,
+    needEnterAction = true
+  } = focusScopeProps;
+  const {
+    direction
+  } = DropBoxContext || {};
+  let isModel = isMobilePopover(needResponsive);
+  const {
+    zIndexStyle
+  } = cssJSLogic(props);
+  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+    onClose: onClose,
+    elementRef: dropBoxRef,
+    needAutoFocus: needAutoFocus,
+    needRestoreFocus: needRestoreFocus,
+    needListNavigation: needListNavigation,
+    needFocusLoop: needFocusLoop,
+    needEnterAction: needEnterAction,
+    ...focusScopeProps
+  }, /*#__PURE__*/React.createElement(DropBoxElement, {
+    isModel: isModel,
+    direction: direction,
+    ...props,
+    zIndexStyle: zIndexStyle,
+    subContainerRef: dropBoxRef
+  })) : /*#__PURE__*/React.createElement(DropBoxElement, {
+    isModel: isModel,
+    subContainerRef: dropBoxRef,
+    direction: direction,
+    ...props,
+    zIndexStyle: zIndexStyle
+  });
+  return isModel && isActive ? /*#__PURE__*/React.createElement(Modal, {
+    portalId: portalId
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `${style.freezeLayer} ${style.freeze}`,
+    style: zIndexStyle,
+    onClick: stopPropagation
+  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Modal, {
+    portalId: portalId
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
+    className: style.freezeLayer,
+    style: zIndexStyle,
+    onClick: stopPropagation
+  }) : null, dropBoxEle)) : dropBoxEle;
+}
+DropBox.propTypes = DropBoxPropTypes;
+DropBox.defaultProps = DropBoxDefaultProps;

package/es/v1/DropBox/DropBoxElement/DropBoxElement.js

@@ -0,0 +1,133 @@
+import React from 'react';
+import useDropboxPosCalc from "../../../DropBox/DropBoxElement/useDropboxPosCalc";
+import cssJSLogic from "../../../DropBox/DropBoxElement/css/cssJSLogic";
+import { positionMapping } from "../../../DropBox/DropBoxPositionMapping.js";
+import { DropBoxElementDefaultProps } from "./props/defaultProps";
+import { DropBoxElementPropTypes } from "./props/propTypes";
+import { mergeStyle } from '@zohodesk/utils';
+import style from "../../../DropBox/DropBoxElement/css/DropBoxElement.module.css";
+export default function DropBoxElement(props) {
+  let {
+    children,
+    isAnimate,
+    isArrow,
+    arrowPosition,
+    boxPosition,
+    size,
+    onClick,
+    isActive,
+    dataId,
+    dataSelectorId,
+    isModel,
+    isAbsolutePositioningNeeded,
+    tourId,
+    htmlId,
+    a11y,
+    tabIndex,
+    palette,
+    subContainerRef,
+    customStyle,
+    animationStyle
+  } = props;
+  let isAbsolute = isAbsolutePositioningNeeded;
+
+  const FireOnAnimationEnd = () => {
+    let eleClassList = subContainerRef && subContainerRef.current.classList;
+    let animationStyles = animationStyle == 'default' ? style.fadeInScale : style[animationStyle];
+    animationStyles.split(' ').map(rmStyle => {
+      if (eleClassList && eleClassList.contains(rmStyle)) {
+        eleClassList.remove(rmStyle);
+      }
+    });
+  };
+
+  const getRef = ele => {
+    const {
+      getRef,
+      forwardRef
+    } = props;
+    getRef && getRef(ele);
+
+    if (forwardRef) {
+      forwardRef.current = ele;
+    }
+  };
+
+  if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
+    isAbsolute = true;
+  }
+
+  const {
+    role,
+    ariaMultiselectable,
+    ariaLabelledby
+  } = a11y;
+  boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
+  const boxDirection = positionMapping[boxPosition].direction;
+
+  if (isAbsolute) {
+    arrowPosition = arrowPosition ? arrowPosition : positionMapping[boxPosition].arrowPosition;
+    boxPosition = positionMapping[boxPosition].positionStyle;
+  } else {
+    arrowPosition = positionMapping[boxPosition].arrowPosition;
+  }
+
+  const {
+    arrowstyle,
+    boxstyle,
+    needBoxStyle
+  } = useDropboxPosCalc(props);
+  const mergedStyle = mergeStyle(style, customStyle);
+  const {
+    boxClassName,
+    subContainerClass,
+    inlineStyle
+  } = cssJSLogic({
+    props,
+    style: mergedStyle,
+    customState: {
+      boxPosition,
+      boxDirection,
+      boxstyle,
+      needBoxStyle,
+      isAbsolute
+    }
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: boxClassName,
+    "data-id": `${dataId}`,
+    "data-test-id": `${dataId}`,
+    "data-selector-id": dataSelectorId,
+    ref: getRef,
+    style: inlineStyle,
+    "data-tour": tourId,
+    "data-position": boxPosition,
+    id: htmlId,
+    role: role,
+    "aria-multiselectable": ariaMultiselectable,
+    "aria-labelledby": ariaLabelledby,
+    tabIndex: tabIndex,
+    onAnimationEnd: isAnimate && FireOnAnimationEnd,
+    "data-a11y-focus-main-area": true
+  }, /*#__PURE__*/React.createElement("div", {
+    tabIndex: "-1",
+    className: `${subContainerClass} ${style[`${palette}Palette`]}`,
+    onClick: onClick,
+    "data-id": `${dataId}_subcontainer`,
+    "data-test-id": `${dataId}_subcontainer`,
+    "data-selector-id": `${dataSelectorId}_subcontainer`,
+    ref: subContainerRef
+  }, isModel ? /*#__PURE__*/React.createElement("div", {
+    className: style.closeBar
+  }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
+    className: style[arrowPosition],
+    style: arrowstyle,
+    "data-id": `${dataId}_arrow`,
+    "data-test-id": `${dataId}_arrow`,
+    "data-selector-id": `${dataSelectorId}_arrow`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.arrowShape
+  })), children));
+}
+DropBoxElement.propTypes = DropBoxElementPropTypes;
+DropBoxElement.defaultProps = DropBoxElementDefaultProps;

package/es/v1/DropBox/DropBoxElement/props/defaultProps.js

@@ -0,0 +1,18 @@
+export const DropBoxElementDefaultProps = {
+  animationStyle: 'default',
+  boxPosition: 'bottomLeft',
+  dataId: 'dropBox',
+  dataSelectorId: 'dropBox',
+  isActive: false,
+  isAnimate: false,
+  isArrow: true,
+  isRadius: true,
+  size: 'default',
+  isAbsolutePositioningNeeded: true,
+  isBoxPaddingNeed: false,
+  isPadding: true,
+  customClass: {},
+  a11y: {},
+  palette: 'default',
+  customInlineStyle: false
+};

package/es/v1/DropBox/DropBoxElement/props/propTypes.js

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+export const DropBoxElementPropTypes = {
+  animationStyle: PropTypes.oneOf(['default', 'bounce', 'fadeIn', 'scaleIn']),
+  arrowBottom: PropTypes.number,
+  arrowLeft: PropTypes.number,
+  arrowPosition: PropTypes.oneOf(['start', 'mid', 'end']),
+  arrowRight: PropTypes.number,
+  arrowTop: PropTypes.number,
+  bottom: PropTypes.number,
+  boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
+  children: PropTypes.element,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  forwardRef: PropTypes.object,
+  getRef: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isActive: PropTypes.bool,
+  isAnimate: PropTypes.bool,
+  isArrow: PropTypes.bool,
+  isBoxPaddingNeed: PropTypes.bool,
+  isPadding: PropTypes.bool,
+  isRadius: PropTypes.bool,
+  left: PropTypes.number,
+  onClick: PropTypes.func,
+  right: PropTypes.number,
+  size: PropTypes.oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
+  top: PropTypes.number,
+  tourId: PropTypes.string,
+  htmlId: PropTypes.string,
+  tabIndex: PropTypes.number,
+  customClass: PropTypes.shape({
+    customDropBox: PropTypes.string,
+    customMobileDropBox: PropTypes.string,
+    customDropBoxWrap: PropTypes.string,
+    customMobileDropBoxWrap: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaMultiselectable: PropTypes.bool,
+    ariaLabelledby: PropTypes.string
+  }),
+  palette: PropTypes.oneOf(['default', 'dark']),
+  customStyle: PropTypes.object,
+  customInlineStyle: PropTypes.bool,
+  isModel: PropTypes.bool,
+  direction: PropTypes.string,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
+  zIndexStyle: PropTypes.object,
+  subContainerRef: PropTypes.func
+};

package/es/v1/DropBox/props/defaultProps.js

@@ -0,0 +1,14 @@
+import { DropBoxElementDefaultProps } from "../DropBoxElement/props/defaultProps";
+export const defaultProps = {
+  needResponsive: true,
+  portalId: 'portal1',
+  isActive: false,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
+  needFocusScope: false,
+  needAutoZindex: true,
+  customProps: {}
+};
+export const DropBoxDefaultProps = { ...DropBoxElementDefaultProps,
+  ...defaultProps
+};

package/es/v1/DropBox/props/propTypes.js

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import { DropBoxElementPropTypes } from "../DropBoxElement/props/propTypes";
+export const propTypes = {
+  needResponsive: PropTypes.bool,
+  portalId: PropTypes.string,
+  isActive: PropTypes.bool,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  needFocusScope: PropTypes.bool,
+  needAutoZindex: PropTypes.bool,
+  customProps: PropTypes.object,
+  onClose: PropTypes.func
+};
+export const DropBoxPropTypes = { ...DropBoxElementPropTypes,
+  ...propTypes
+};

package/es/v1/DropBox/utils/isMobilePopover.js

@@ -0,0 +1,17 @@
+import { getLibraryConfig } from "../../../Provider/Config";
+export default function isMobilePopover(needResponsive) {
+  //   let { needResponsive } = props;
+  let windowWidth,
+      mobileWidth = getLibraryConfig('mobileWidth'),
+      isModel = false;
+
+  if (needResponsive) {
+    windowWidth = window.innerWidth;
+
+    if (windowWidth <= mobileWidth) {
+      isModel = true;
+    }
+  }
+
+  return isModel ? true : false;
+}

package/es/v1/DropDown/DropDown.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTypes, DropDownItemContainer_propTypes } from "./props/propTypes";
+import { DropDownItemContainer_defaultProps } from "./props/defaultProps";
+import style from "../../DropDown/DropDown.module.css";
+import PopOver, { PopOverTarget, PopOverContainer } from "../PopOver/PopOver";
+export default function DropDown(props) {
+  let {
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(PopOver, { ...props
+  }, /*#__PURE__*/React.createElement(PopOverTarget, null, children[0]), /*#__PURE__*/React.createElement(PopOverContainer, null, children[1]));
+}
+DropDown.propTypes = DropDown_propTypes;
+export function DropDownTarget(props) {
+  let {
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement("div", null, children);
+}
+DropDownTarget.propTypes = DropDownTarget_propTypes;
+export function DropDownContainer(props) {
+  let {
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement("div", null, " ", children, " ");
+}
+DropDownContainer.propTypes = DropDownContainer_propTypes;
+export function DropDownItemContainer(props) {
+  let {
+    children,
+    dataId,
+    getRef,
+    onScroll
+  } = props;
+
+  function handleScroll(e) {
+    onScroll && onScroll(e);
+  }
+
+  function getReference(ele) {
+    getRef && getRef(ele);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.listGroup,
+    onScroll: handleScroll,
+    ref: getReference,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, children);
+}
+DropDownItemContainer.propTypes = DropDownItemContainer_propTypes;
+DropDownItemContainer.defaultProps = DropDownItemContainer_defaultProps;

package/es/v1/DropDown/DropDownHeading.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { DropDownHeading_propTypes } from "./props/propTypes";
+import { DropDownHeading_defaultProps } from "./props/defaultProps";
+import style from "../../DropDown/DropDownHeading.module.css";
+export default function DropDownHeading(props) {
+  let {
+    text,
+    title = text,
+    children,
+    customClass,
+    palette,
+    htmlId,
+    a11y,
+    dataId,
+    dataSelectorId
+  } = props;
+  let {
+    role,
+    ariaLabelledby,
+    ariaLabel
+  } = a11y;
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style[palette]} ${customClass}`,
+    "data-title": title,
+    role: role,
+    "aria-labelledby": ariaLabelledby,
+    "aria-label": ariaLabel,
+    id: htmlId,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    "data-selector-id": dataSelectorId // tabindex='0'
+
+  }, text, children);
+}
+DropDownHeading.propTypes = DropDownHeading_propTypes;
+DropDownHeading.defaultProps = DropDownHeading_defaultProps;

package/es/v1/DropDown/DropDownItem.js

@@ -0,0 +1,56 @@
+import React, { useRef } from 'react';
+import { DropDownItem_propTypes } from "./props/propTypes";
+import { DropDownItem_defaultProps } from "./props/defaultProps";
+import style from "../../DropDown/DropDownItem.module.css";
+export default function DropDownItem(props) {
+  let {
+    value,
+    active,
+    children,
+    hightlight,
+    dataId,
+    customClass = '',
+    index,
+    getRef,
+    onClick,
+    id,
+    onHover
+  } = props;
+  const eleRef = useRef(null);
+
+  function getReference(ele) {
+    eleRef.current = ele;
+    getRef && getRef(ele, index);
+  }
+
+  function getSelectedElement() {
+    return eleRef.current ? eleRef.current : null;
+  }
+
+  function handleClick(e) {
+    onClick && onClick(id, value, index, e);
+  }
+
+  function handleHover(e) {
+    onHover && onHover(id, value, index, e);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.list} ${customClass} ${active ? style.listActive : hightlight ? style.listHover : ''} ${children && children[1] ? style.padding : ''}`,
+    onClick: handleClick,
+    onMouseOver: handleHover,
+    ref: getReference,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, children && children[0] ? /*#__PURE__*/React.createElement("span", {
+    className: style.children
+  }, " ", children[0], " ") : children !== undefined ? /*#__PURE__*/React.createElement("span", {
+    className: style.children
+  }, " ", children, " ") : null, value ? /*#__PURE__*/React.createElement("span", {
+    className: style.value
+  }, value) : '', children && children[1] ? /*#__PURE__*/React.createElement("span", {
+    className: style.user
+  }, " ", children[1], " ") : '');
+}
+DropDownItem.propTypes = DropDownItem_propTypes;
+DropDownItem.defaultProps = DropDownItem_defaultProps;