@elliemae/ds-pills 2.2.0-alpha.2 → 2.2.0-beta.0

package/esm/components/types/RemovablePill.js

@@ -1,50 +1,63 @@
-import * as React from "react";
-import React2, { useCallback, useContext, useMemo } from "react";
-import { uid } from "uid";
-import { CloseXsmall } from "@elliemae/ds-icons";
-import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { StyledRemovablePillWrapper } from "../styled";
-import { DSPillGroupV2Context } from "../PillGroup";
-import { DSPillButton } from "../PillButton";
-const RemovablePill = React2.memo(({ label, size, labelTruncated, onRemove, innerRef, ariaLabel }) => {
-  const { onKeyboardRemove } = useContext(DSPillGroupV2Context);
-  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
-  const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
-    value: children
-  }) : React2.Fragment;
-  const onKeyDown = useCallback((e) => {
-    if (["Enter", "Space"].includes(e.code)) {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import React, { useContext, useMemo, useCallback } from 'react';
+import { uid } from 'uid';
+import { CloseXsmall } from '@elliemae/ds-icons';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { StyledRemovablePillWrapper } from '../styled.js';
+import { DSPillGroupV2Context } from '../PillGroup.js';
+import { DSPillButton } from '../PillButton.js';
+
+const RemovablePill = /*#__PURE__*/React.memo(_ref => {
+  let {
+    label,
+    size,
+    labelTruncated,
+    onRemove,
+    innerRef,
+    ariaLabel
+  } = _ref;
+  const {
+    onKeyboardRemove
+  } = useContext(DSPillGroupV2Context);
+  const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
+  const TextComponent = labelTruncated ? _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+      value: children
+    });
+  } : React.Fragment;
+  const onKeyDown = useCallback(e => {
+    if (['Enter', 'Space'].includes(e.code)) {
       e.preventDefault();
-      if (onKeyboardRemove)
-        onKeyboardRemove(pillUid);
+      if (onKeyboardRemove) onKeyboardRemove(pillUid);
       onRemove(e);
     }
   }, [onKeyboardRemove, onRemove, pillUid]);
-  return /* @__PURE__ */ React2.createElement(StyledRemovablePillWrapper, {
-    size,
-    cols: ["auto", "24px"],
+  return /*#__PURE__*/_jsx(StyledRemovablePillWrapper, {
+    size: size,
+    cols: ['auto', '24px'],
     gutter: "2px",
     alignItems: "center",
     justifyItems: "center",
     className: "ds-pill-wrapper ds-pill-wrapper-removable",
     "data-testid": "ds-pill-wrapper",
     "aria-label": ariaLabel || label
-  }, /* @__PURE__ */ React2.createElement(TextComponent, null, label), /* @__PURE__ */ React2.createElement(DSPillButton, {
+  }, void 0, /*#__PURE__*/_jsx(TextComponent, {}, void 0, label), /*#__PURE__*/_jsx(DSPillButton, {
     className: "ds-pill-focus-point",
     id: pillUid,
     "data-testid": "ds-pill-close-icon",
-    innerRef,
+    innerRef: innerRef,
     onClick: onRemove,
-    onKeyDown,
-    "aria-label": `Remove ${label}`,
+    onKeyDown: onKeyDown,
+    "aria-label": "Remove ".concat(label),
     type: "right"
-  }, /* @__PURE__ */ React2.createElement(CloseXsmall, {
+  }, void 0, /*#__PURE__*/_jsx(CloseXsmall, {
     width: 22.65,
     height: 22.65,
-    color: ["brand-primary", "700"]
+    color: ['brand-primary', '700']
   })));
 });
-export {
-  RemovablePill
-};
-//# sourceMappingURL=RemovablePill.js.map
+
+export { RemovablePill };

package/esm/components/types/ValuePill.js

@@ -1,30 +1,45 @@
-import * as React from "react";
-import React2 from "react";
-import { DSTooltipV2 } from "@elliemae/ds-tooltip";
-import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { StyledSpanWithTooltip, StyledValuePillWrapper } from "../styled";
-const ValuePill = React2.memo(({ label, size, labelTruncated, tooltipValue, iconLeft, ariaLabel }) => {
-  const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
-    value: children
-  }) : React2.Fragment;
-  return /* @__PURE__ */ React2.createElement(StyledValuePillWrapper, {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import React from 'react';
+import { DSTooltipV2 } from '@elliemae/ds-tooltip';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { StyledValuePillWrapper, StyledSpanWithTooltip } from '../styled.js';
+
+const ValuePill = /*#__PURE__*/React.memo(_ref => {
+  let {
+    label,
     size,
+    labelTruncated,
+    tooltipValue,
+    iconLeft,
+    ariaLabel
+  } = _ref;
+  const TextComponent = labelTruncated ? _ref2 => {
+    let {
+      children
+    } = _ref2;
+    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+      value: children
+    });
+  } : React.Fragment;
+  return /*#__PURE__*/_jsx(StyledValuePillWrapper, {
+    size: size,
     alignItems: "center",
     className: "ds-pill-wrapper ds-pill-wrapper-value",
     "data-testid": "ds-pill-wrapper",
     "aria-label": ariaLabel || label,
-    cols: [iconLeft && "min-content", "auto"].filter((notFalse) => notFalse),
+    cols: [iconLeft && 'min-content', 'auto'].filter(notFalse => notFalse),
     gutter: "xxxs",
     hasIcon: iconLeft !== null
-  }, iconLeft, tooltipValue !== "" ? /* @__PURE__ */ React2.createElement(DSTooltipV2, {
+  }, void 0, iconLeft, tooltipValue !== '' ? /*#__PURE__*/_jsx(DSTooltipV2, {
     title: tooltipValue,
-    triggerComponent: /* @__PURE__ */ React2.createElement(StyledSpanWithTooltip, {
+    triggerComponent: /*#__PURE__*/_jsx(StyledSpanWithTooltip, {
       className: "ds-pill-tooltip-value",
       tabIndex: 0
-    }, label)
-  }) : /* @__PURE__ */ React2.createElement(TextComponent, null, label));
+    }, void 0, label)
+  }) : /*#__PURE__*/_jsx(TextComponent, {}, void 0, label));
 });
-export {
-  ValuePill
-};
-//# sourceMappingURL=ValuePill.js.map
+
+export { ValuePill };

package/esm/components/types/index.js

@@ -1,8 +1,6 @@
-import * as React from "react";
-export * from "./DropdownPill";
-export * from "./InputPill";
-export * from "./LabelPill";
-export * from "./ReadOnlyPill";
-export * from "./RemovablePill";
-export * from "./ValuePill";
-//# sourceMappingURL=index.js.map
+export { DropdownPill } from './DropdownPill.js';
+export { InputPill } from './InputPill.js';
+export { LabelPill } from './LabelPill.js';
+export { ReadOnlyPill } from './ReadOnlyPill.js';
+export { RemovablePill } from './RemovablePill.js';
+export { ValuePill } from './ValuePill.js';

package/esm/deprecated/DropdownPill.js

@@ -1,63 +1,100 @@
-import * as React from "react";
-import React2, { useRef, useState } from "react";
-import { PropTypes, describe } from "react-desc";
-import { DSDropdownMenu } from "@elliemae/ds-dropdownmenu";
-import { ChevronDown } from "@elliemae/ds-icons";
-import { useFocusGroupItem } from "@elliemae/ds-shared/FocusGroup/useFocusGroupItem";
-import { Pill } from "./Pill";
-function DropdownPill({
-  containerProps = {},
-  label = "",
-  variant,
-  tabIndex = -1,
-  closeMenuOnItemSelection = false,
-  maxWidth,
-  minWidth,
-  ...dropdownProps
-}) {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { useRef, useState } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import DSDropdownMenu from '@elliemae/ds-dropdownmenu';
+import { ChevronDown } from '@elliemae/ds-icons';
+import useFocusGroupItem from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';
+import { Pill } from './Pill.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _ChevronDown;
+
+const _excluded = ["containerProps", "label", "variant", "tabIndex", "closeMenuOnItemSelection", "maxWidth", "minWidth"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function DropdownPill(_ref) {
+  let {
+    containerProps = {},
+    label = '',
+    variant,
+    tabIndex = -1,
+    closeMenuOnItemSelection = false,
+    maxWidth,
+    minWidth
+  } = _ref,
+      dropdownProps = _objectWithoutProperties(_ref, _excluded);
+
   const ref = useRef(null);
   const [chevronEl, chevronRef] = useState();
-  const { focusFirst } = useFocusGroupItem(ref);
-  return /* @__PURE__ */ React2.createElement(DSDropdownMenu, {
-    ...dropdownProps,
-    closeMenuOnItemSelection,
-    maxWidth,
+  const {
+    focusFirst
+  } = useFocusGroupItem(ref);
+  return /*#__PURE__*/jsx(DSDropdownMenu, _objectSpread(_objectSpread({}, dropdownProps), {}, {
+    closeMenuOnItemSelection: closeMenuOnItemSelection,
+    maxWidth: maxWidth,
     hideIfNotVisible: true,
-    menuProps: { className: "dropdown-pill-menu", zIndex: 100 },
-    minWidth,
+    menuProps: {
+      className: 'dropdown-pill-menu',
+      zIndex: 100
+    },
+    minWidth: minWidth,
     onClose: focusFirst,
     referenceNode: chevronEl,
-    triggerComponent: /* @__PURE__ */ React2.createElement(Pill, {
+    triggerComponent: /*#__PURE__*/_jsx(Pill, {
       "data-testid": "dropdown-pill",
       className: "dropdown-pill",
-      containerProps: { role: "listbox", ...containerProps },
+      containerProps: _objectSpread({
+        role: 'listbox'
+      }, containerProps),
       innerRef: ref,
-      label,
-      rightAddon: /* @__PURE__ */ React2.createElement("div", {
-        ref: chevronRef
-      }, /* @__PURE__ */ React2.createElement(ChevronDown, {
-        className: "dropdown-pill-chevron-down",
-        "data-testid": "dropdown-pill-button"
-      })),
-      tabIndex,
-      variant
+      label: label,
+      rightAddon: /*#__PURE__*/jsx("div", {
+        ref: chevronRef,
+        children: _ChevronDown || (_ChevronDown = /*#__PURE__*/_jsx(ChevronDown, {
+          className: "dropdown-pill-chevron-down",
+          "data-testid": "dropdown-pill-button"
+        }))
+      }),
+      tabIndex: tabIndex,
+      variant: variant
     })
-  });
+  }));
 }
+
 const props = {
-  containerProps: PropTypes.object.description("props injected to component wrapper"),
-  label: PropTypes.string.isRequired.description("pill text label"),
-  variant: PropTypes.oneOf(["value", "title"]).description("pill variant"),
-  tabIndex: PropTypes.number.description("html focus order"),
-  closeMenuOnItemSelection: PropTypes.bool.description("close menu on item selection"),
-  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("pill max width"),
-  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("pill min width")
+  /** props injected to component wrapper */
+  containerProps: PropTypes.object.description('props injected to component wrapper'),
+
+  /** labeled pill text label */
+  label: PropTypes.string.isRequired.description('pill text label'),
+
+  /** pill variant */
+  variant: PropTypes.oneOf(['value', 'title']).description('pill variant'),
+
+  /** html focus border */
+  tabIndex: PropTypes.number.description('html focus order'),
+
+  /** close menu on item selection */
+  closeMenuOnItemSelection: PropTypes.bool.description('close menu on item selection'),
+
+  /** pill max width */
+  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),
+
+  /** pill min width */
+  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width')
 };
-DropdownPill.propTypes = props;
 const DSDropdownPillWithSchema = describe(DropdownPill);
 DSDropdownPillWithSchema.propTypes = props;
-export {
-  DSDropdownPillWithSchema,
-  DropdownPill
-};
-//# sourceMappingURL=DropdownPill.js.map
+
+export { DSDropdownPillWithSchema, DropdownPill };

package/esm/deprecated/InputPill.js

@@ -1,45 +1,68 @@
-import * as React from "react";
-import React2 from "react";
-import { CloseXsmall } from "@elliemae/ds-icons";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { DSInput, DSInputMask } from "@elliemae/ds-form";
-import { Pill } from "./Pill";
-const StyledInputPill = aggregatedClasses(Pill)("input-pill", null, ({ value }) => ({
-  value
-}));
-function InputPill({
-  containerProps = {},
-  placeholder = "Enter Value",
-  onChange = () => {
-  },
-  onRemove,
-  value,
-  type,
-  ...otherProps
-}) {
-  let TypeOfInput = DSInput;
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { CloseXsmall } from '@elliemae/ds-icons';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { DSInput, DSInputMask } from '@elliemae/ds-form';
+import { Pill } from './Pill.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["containerProps", "placeholder", "onChange", "onRemove", "value", "type"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const StyledInputPill = aggregatedClasses(Pill)('input-pill', null, _ref => {
+  let {
+    value
+  } = _ref;
+  return {
+    value
+  };
+});
+function InputPill(_ref2) {
+  let {
+    containerProps = {},
+    placeholder = 'Enter Value',
+    onChange = () => {},
+    onRemove,
+    value,
+    type
+  } = _ref2,
+      otherProps = _objectWithoutProperties(_ref2, _excluded);
+
+  let TypeOfInput = DSInput; // TODO: implement the DSTimeInput, see how because it returns a moment()
+  // TODO: implement the DSDateInput
+
   switch (type) {
-    case "inputText":
+    case 'inputText':
       TypeOfInput = DSInput;
       break;
-    case "inputMask":
+
+    case 'inputMask':
       TypeOfInput = DSInputMask;
       break;
-    default:
-      break;
   }
-  return /* @__PURE__ */ React2.createElement(StyledInputPill, {
+
+  return /*#__PURE__*/_jsx(StyledInputPill, {
     className: "input-pill",
-    classProps: { value },
-    containerProps,
-    label: /* @__PURE__ */ React2.createElement(TypeOfInput, {
+    classProps: {
+      value
+    },
+    containerProps: containerProps,
+    label: /*#__PURE__*/jsx(TypeOfInput, _objectSpread({
       "data-testid": "input-pill",
-      onChange,
-      placeholder,
-      value,
-      ...otherProps
-    }),
-    rightAddon: value && /* @__PURE__ */ React2.createElement(CloseXsmall, {
+      onChange: onChange,
+      placeholder: placeholder,
+      value: value
+    }, otherProps)),
+    rightAddon: value && /*#__PURE__*/_jsx(CloseXsmall, {
       className: "remove-pill-button",
       "data-testid": "remove-pill-button",
       onClick: onRemove
@@ -47,7 +70,5 @@ function InputPill({
     tabIndex: -1
   });
 }
-export {
-  InputPill
-};
-//# sourceMappingURL=InputPill.js.map
+
+export { InputPill };

package/esm/deprecated/LabeledDropdownPills.js

@@ -1,73 +1,95 @@
-import * as React from "react";
-import React2 from "react";
-import { PropTypes, describe } from "react-desc";
-import { PillGroup } from "./PillGroup";
-import { LabeledDropdownSinglePill } from "./LabeledDropdownPillsTypes/LabeledDropdownSinglePill";
-import { LabeledDropdownMultiPills } from "./LabeledDropdownPillsTypes/LabeledDropdownMultiPill";
-import { LabeledDropdownCascadeMenuPill } from "./LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill";
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import { PillGroup } from './PillGroup.js';
+import LabeledDropdownSinglePill from './LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js';
+import LabeledDropdownMultiPills from './LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js';
+import LabeledDropdownCascadeMenuPill from './LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["label", "value", "type", "onFocusNextGroup", "onFocusPreviousGroup", "onFocusGroupSet", "maxWidth", "minWidth", "fixed"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const DropdownPills = {
   single: LabeledDropdownSinglePill,
   multi: LabeledDropdownMultiPills,
   cascaded: LabeledDropdownCascadeMenuPill
 };
-const createDropdownPill = (type) => DropdownPills[type] || DropdownPills.single;
-function LabeledDropdownPills({
-  label = "",
-  value,
-  type,
-  onFocusNextGroup,
-  onFocusPreviousGroup,
-  onFocusGroupSet,
-  maxWidth,
-  minWidth,
-  fixed,
-  ...menuProps
-}) {
-  const Component = createDropdownPill(type);
-  return /* @__PURE__ */ React2.createElement(PillGroup, {
-    onFocusGroupSet,
+
+const createDropdownPill = type => DropdownPills[type] || DropdownPills.single;
+
+function LabeledDropdownPills(_ref) {
+  let {
+    label = '',
+    value,
+    type,
     onFocusNextGroup,
-    onFocusPreviousGroup
-  }, /* @__PURE__ */ React2.createElement(Component, {
-    ...menuProps,
-    label,
+    onFocusPreviousGroup,
+    onFocusGroupSet,
     maxWidth,
     minWidth,
-    value,
     fixed
-  }));
+  } = _ref,
+      menuProps = _objectWithoutProperties(_ref, _excluded);
+
+  const Component = createDropdownPill(type);
+  return /*#__PURE__*/_jsx(PillGroup, {
+    onFocusGroupSet: onFocusGroupSet,
+    onFocusNextGroup: onFocusNextGroup,
+    onFocusPreviousGroup: onFocusPreviousGroup
+  }, void 0, /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, menuProps), {}, {
+    label: label,
+    maxWidth: maxWidth,
+    minWidth: minWidth,
+    value: value,
+    fixed: fixed
+  })));
 }
+
 const props = {
-  type: PropTypes.oneOf(["single", "multi", "cascaded"]).description("pill type"),
-  onFocusNextGroup: PropTypes.func.description("focus next group callback"),
-  onFocusPreviousGroup: PropTypes.func.description("focus prev group callback"),
-  onFocusGroupSet: PropTypes.func.description("focus group set callback"),
-  maxWidth: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number
-  ]).description("pill max width"),
-  minWidth: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number
-  ]).description("pill min width"),
-  fixed: PropTypes.bool.description("fixed pill"),
-  label: PropTypes.string.isRequired.description("pill label text"),
-  value: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.shape({
-      id: PropTypes.string,
-      label: PropTypes.string
-    })),
-    PropTypes.shape({
-      id: PropTypes.string,
-      label: PropTypes.string
-    })
-  ]).description("pill value")
+  /** pill type */
+  type: PropTypes.oneOf(['single', 'multi', 'cascaded']).description('pill type'),
+
+  /** focus next group callback */
+  onFocusNextGroup: PropTypes.func.description('focus next group callback'),
+
+  /** focus prev group callback */
+  onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),
+
+  /** focus group set callback */
+  onFocusGroupSet: PropTypes.func.description('focus group set callback'),
+
+  /** pill max width */
+  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),
+
+  /** pill min width */
+  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width'),
+
+  /** fixed pill */
+  fixed: PropTypes.bool.description('fixed pill'),
+
+  /** pill label text */
+  label: PropTypes.string.isRequired.description('pill label text'),
+
+  /** pill value */
+  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string
+  })), PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string
+  })]).description('pill value')
 };
-LabeledDropdownPills.propTypes = props;
 const DSLabeledDropdownPillsWithSchema = describe(LabeledDropdownPills);
 DSLabeledDropdownPillsWithSchema.propTypes = props;
-export {
-  DSLabeledDropdownPillsWithSchema,
-  LabeledDropdownPills
-};
-//# sourceMappingURL=LabeledDropdownPills.js.map
+
+export { DSLabeledDropdownPillsWithSchema, LabeledDropdownPills };