@elliemae/ds-pills 2.3.0-next.3 → 3.0.0-alpha.0

package/dist/esm/deprecated/DropdownPill.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/DropdownPill.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';\nimport { Pill } from './Pill';\n\nfunction DropdownPill({\n  containerProps = {},\n  label = '',\n  variant,\n  tabIndex = -1,\n  closeMenuOnItemSelection = false,\n  maxWidth,\n  minWidth,\n  ...dropdownProps\n}) {\n  const ref = useRef(null);\n  const [chevronEl, chevronRef] = useState();\n  const { focusFirst } = useFocusGroupItem(ref);\n  return (\n    <DSDropdownMenu\n      {...dropdownProps}\n      closeMenuOnItemSelection={closeMenuOnItemSelection}\n      maxWidth={maxWidth}\n      hideIfNotVisible\n      menuProps={{ className: 'dropdown-pill-menu', zIndex: 100 }}\n      minWidth={minWidth}\n      onClose={focusFirst}\n      referenceNode={chevronEl}\n      triggerComponent={\n        <Pill\n          data-testid=\"dropdown-pill\"\n          className=\"dropdown-pill\"\n          containerProps={{ role: 'listbox', ...containerProps }}\n          innerRef={ref}\n          label={label}\n          rightAddon={\n            <div ref={chevronRef}>\n              <ChevronDown className=\"dropdown-pill-chevron-down\" data-testid=\"dropdown-pill-button\" />\n            </div>\n          }\n          tabIndex={tabIndex}\n          variant={variant}\n        />\n      }\n    />\n  );\n}\n\nconst props = {\n  /** props injected to component wrapper */\n  containerProps: PropTypes.object.description('props injected to component wrapper'),\n  /** labeled pill text label */\n  label: PropTypes.string.isRequired.description('pill text label'),\n  /** pill variant */\n  variant: PropTypes.oneOf(['value', 'title']).description('pill variant'),\n  /** html focus border */\n  tabIndex: PropTypes.number.description('html focus order'),\n  /** close menu on item selection */\n  closeMenuOnItemSelection: PropTypes.bool.description('close menu on item selection'),\n  /** pill max width */\n  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),\n  /** pill min width */\n  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width'),\n};\n\nDropdownPill.propTypes = props;\nconst DSDropdownPillWithSchema = describe(DropdownPill);\nDSDropdownPillWithSchema.propTypes = props;\n\nexport { DropdownPill, DSDropdownPillWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,sBAAsB;AAAA,EACpB,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,2BAA2B;AAAA,EAC3B;AAAA,EACA;AAAA,KACG;AAAA,GACF;AACD,QAAM,MAAM,OAAO;AACnB,QAAM,CAAC,WAAW,cAAc;AAChC,QAAM,EAAE,eAAe,kBAAkB;AACzC,SACE,qCAAC,gBAAD;AAAA,OACM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAgB;AAAA,IAChB,WAAW,EAAE,WAAW,sBAAsB,QAAQ;AAAA,IACtD;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf,kBACE,qCAAC,MAAD;AAAA,MACE,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,gBAAgB,EAAE,MAAM,cAAc;AAAA,MACtC,UAAU;AAAA,MACV;AAAA,MACA,YACE,qCAAC,OAAD;AAAA,QAAK,KAAK;AAAA,SACR,qCAAC,aAAD;AAAA,QAAa,WAAU;AAAA,QAA6B,eAAY;AAAA;AAAA,MAGpE;AAAA,MACA;AAAA;AAAA;AAAA;AAOV,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAE7C,OAAO,UAAU,OAAO,WAAW,YAAY;AAAA,EAE/C,SAAS,UAAU,MAAM,CAAC,SAAS,UAAU,YAAY;AAAA,EAEzD,UAAU,UAAU,OAAO,YAAY;AAAA,EAEvC,0BAA0B,UAAU,KAAK,YAAY;AAAA,EAErD,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAEhF,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA;AAGlF,aAAa,YAAY;AACzB,MAAM,2BAA2B,SAAS;AAC1C,yBAAyB,YAAY;",
+  "names": []
+}

package/dist/esm/deprecated/InputPill.js

@@ -0,0 +1,53 @@
+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;
+  switch (type) {
+    case "inputText":
+      TypeOfInput = DSInput;
+      break;
+    case "inputMask":
+      TypeOfInput = DSInputMask;
+      break;
+    default:
+      break;
+  }
+  return /* @__PURE__ */ React2.createElement(StyledInputPill, {
+    className: "input-pill",
+    classProps: { value },
+    containerProps,
+    label: /* @__PURE__ */ React2.createElement(TypeOfInput, {
+      "data-testid": "input-pill",
+      onChange,
+      placeholder,
+      value,
+      ...otherProps
+    }),
+    rightAddon: value && /* @__PURE__ */ React2.createElement(CloseXsmall, {
+      className: "remove-pill-button",
+      "data-testid": "remove-pill-button",
+      onClick: onRemove
+    }),
+    tabIndex: -1
+  });
+}
+export {
+  InputPill
+};
+//# sourceMappingURL=InputPill.js.map

package/dist/esm/deprecated/InputPill.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/InputPill.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSInput, DSInputMask } from '@elliemae/ds-form';\nimport { Pill } from './Pill';\n\nconst StyledInputPill = aggregatedClasses(Pill)('input-pill', null, ({ value }) => ({\n  value,\n}));\n\nexport function InputPill({\n  containerProps = {},\n  placeholder = 'Enter Value',\n  onChange = () => {},\n  onRemove,\n  value,\n  type,\n  ...otherProps\n}) {\n  let TypeOfInput = DSInput;\n  // TODO: implement the DSTimeInput, see how because it returns a moment()\n  // TODO: implement the DSDateInput\n  switch (type) {\n    case 'inputText':\n      TypeOfInput = DSInput;\n      break;\n    case 'inputMask':\n      TypeOfInput = DSInputMask;\n      break;\n    default:\n      break;\n  }\n\n  return (\n    <StyledInputPill\n      className=\"input-pill\"\n      classProps={{ value }}\n      containerProps={containerProps}\n      label={\n        <TypeOfInput\n          data-testid=\"input-pill\"\n          onChange={onChange}\n          placeholder={placeholder}\n          value={value}\n          {...otherProps}\n        />\n      }\n      rightAddon={\n        value && <CloseXsmall className=\"remove-pill-button\" data-testid=\"remove-pill-button\" onClick={onRemove} />\n      }\n      tabIndex={-1}\n    />\n  );\n}\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,kBAAkB,kBAAkB,MAAM,cAAc,MAAM,CAAC,EAAE,YAAa;AAAA,EAClF;AAAA;AAGK,mBAAmB;AAAA,EACxB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,WAAW,MAAM;AAAA;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GACF;AACD,MAAI,cAAc;AAGlB,UAAQ;AAAA,SACD;AACH,oBAAc;AACd;AAAA,SACG;AACH,oBAAc;AACd;AAAA;AAEA;AAAA;AAGJ,SACE,qCAAC,iBAAD;AAAA,IACE,WAAU;AAAA,IACV,YAAY,EAAE;AAAA,IACd;AAAA,IACA,OACE,qCAAC,aAAD;AAAA,MACE,eAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,SACI;AAAA;AAAA,IAGR,YACE,SAAS,qCAAC,aAAD;AAAA,MAAa,WAAU;AAAA,MAAqB,eAAY;AAAA,MAAqB,SAAS;AAAA;AAAA,IAEjG,UAAU;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/deprecated/LabeledDropdownPills.js

@@ -0,0 +1,73 @@
+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";
+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,
+    onFocusNextGroup,
+    onFocusPreviousGroup
+  }, /* @__PURE__ */ React2.createElement(Component, {
+    ...menuProps,
+    label,
+    maxWidth,
+    minWidth,
+    value,
+    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")
+};
+LabeledDropdownPills.propTypes = props;
+const DSLabeledDropdownPillsWithSchema = describe(LabeledDropdownPills);
+DSLabeledDropdownPillsWithSchema.propTypes = props;
+export {
+  DSLabeledDropdownPillsWithSchema,
+  LabeledDropdownPills
+};
+//# sourceMappingURL=LabeledDropdownPills.js.map

package/dist/esm/deprecated/LabeledDropdownPills.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/LabeledDropdownPills.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { PillGroup } from './PillGroup';\nimport { LabeledDropdownSinglePill } from './LabeledDropdownPillsTypes/LabeledDropdownSinglePill';\nimport { LabeledDropdownMultiPills } from './LabeledDropdownPillsTypes/LabeledDropdownMultiPill';\nimport { LabeledDropdownCascadeMenuPill } from './LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill';\n\nconst DropdownPills = {\n  single: LabeledDropdownSinglePill,\n  multi: LabeledDropdownMultiPills,\n  cascaded: LabeledDropdownCascadeMenuPill,\n};\n\nconst createDropdownPill = (type) =>\n  DropdownPills[type] || DropdownPills.single;\n\nfunction LabeledDropdownPills({\n  label = '',\n  value,\n  type,\n  onFocusNextGroup,\n  onFocusPreviousGroup,\n  onFocusGroupSet,\n  maxWidth,\n  minWidth,\n  fixed,\n  ...menuProps\n}) {\n  const Component = createDropdownPill(type);\n\n  return (\n    <PillGroup\n      onFocusGroupSet={onFocusGroupSet}\n      onFocusNextGroup={onFocusNextGroup}\n      onFocusPreviousGroup={onFocusPreviousGroup}\n    >\n      <Component\n        {...menuProps}\n        label={label}\n        maxWidth={maxWidth}\n        minWidth={minWidth}\n        value={value}\n        fixed={fixed}\n      />\n    </PillGroup>\n  );\n}\n\nconst props = {\n  /** pill type */\n  type: PropTypes.oneOf(['single', 'multi', 'cascaded']).description(\n    'pill type',\n  ),\n  /** focus next group callback */\n  onFocusNextGroup: PropTypes.func.description('focus next group callback'),\n  /** focus prev group callback */\n  onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),\n  /** focus group set callback */\n  onFocusGroupSet: PropTypes.func.description('focus group set callback'),\n  /** pill max width */\n  maxWidth: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n  ]).description('pill max width'),\n  /** pill min width */\n  minWidth: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n  ]).description('pill min width'),\n  /** fixed pill */\n  fixed: PropTypes.bool.description('fixed pill'),\n  /** pill label text */\n  label: PropTypes.string.isRequired.description('pill label text'),\n  /** pill value */\n  value: PropTypes.oneOfType([\n    PropTypes.arrayOf(\n      PropTypes.shape({\n        id: PropTypes.string,\n        label: PropTypes.string,\n      }),\n    ),\n    PropTypes.shape({\n      id: PropTypes.string,\n      label: PropTypes.string,\n    }),\n  ]).description('pill value'),\n};\n\nLabeledDropdownPills.propTypes = props;\nconst DSLabeledDropdownPillsWithSchema = describe(LabeledDropdownPills);\nDSLabeledDropdownPillsWithSchema.propTypes = props;\n\nexport { LabeledDropdownPills, DSLabeledDropdownPillsWithSchema };\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,gBAAgB;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AAAA;AAGZ,MAAM,qBAAqB,CAAC,SAC1B,cAAc,SAAS,cAAc;AAEvC,8BAA8B;AAAA,EAC5B,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GACF;AACD,QAAM,YAAY,mBAAmB;AAErC,SACE,qCAAC,WAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,KAEA,qCAAC,WAAD;AAAA,OACM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAMR,MAAM,QAAQ;AAAA,EAEZ,MAAM,UAAU,MAAM,CAAC,UAAU,SAAS,aAAa,YACrD;AAAA,EAGF,kBAAkB,UAAU,KAAK,YAAY;AAAA,EAE7C,sBAAsB,UAAU,KAAK,YAAY;AAAA,EAEjD,iBAAiB,UAAU,KAAK,YAAY;AAAA,EAE5C,UAAU,UAAU,UAAU;AAAA,IAC5B,UAAU;AAAA,IACV,UAAU;AAAA,KACT,YAAY;AAAA,EAEf,UAAU,UAAU,UAAU;AAAA,IAC5B,UAAU;AAAA,IACV,UAAU;AAAA,KACT,YAAY;AAAA,EAEf,OAAO,UAAU,KAAK,YAAY;AAAA,EAElC,OAAO,UAAU,OAAO,WAAW,YAAY;AAAA,EAE/C,OAAO,UAAU,UAAU;AAAA,IACzB,UAAU,QACR,UAAU,MAAM;AAAA,MACd,IAAI,UAAU;AAAA,MACd,OAAO,UAAU;AAAA;AAAA,IAGrB,UAAU,MAAM;AAAA,MACd,IAAI,UAAU;AAAA,MACd,OAAO,UAAU;AAAA;AAAA,KAElB,YAAY;AAAA;AAGjB,qBAAqB,YAAY;AACjC,MAAM,mCAAmC,SAAS;AAClD,iCAAiC,YAAY;",
+  "names": []
+}

package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js

@@ -0,0 +1,102 @@
+import * as React from "react";
+import React2 from "react";
+import { isFunction, addOrRemove } from "@elliemae/ds-utilities";
+import { PillGroup } from "../PillGroup";
+import { RemovablePill } from "../RemovablePill";
+import { DropdownPill } from "../DropdownPill";
+function renderMenuItems(options, factory) {
+  return options.map((option, index) => {
+    const ItemComponent = factory("radio");
+    if (option.type === "submenu") {
+      const SubmenuComponent = factory("submenu");
+      const ChildComponent = factory("selection-group");
+      return /* @__PURE__ */ React2.createElement(SubmenuComponent, {
+        ...option,
+        key: option.id,
+        item: option
+      }, /* @__PURE__ */ React2.createElement(ChildComponent, {
+        ...option,
+        id: option.id,
+        item: option,
+        items: option.items,
+        itemValueAccessor: (item) => item,
+        multi: true
+      }));
+    }
+    return /* @__PURE__ */ React2.createElement(ItemComponent, {
+      ...option,
+      key: option.id || index,
+      item: option
+    });
+  });
+}
+const getSubmenuOptionLabelById = (options, id) => {
+  const index = options.findIndex((option) => option.id === id);
+  return index ? options[index].label : "";
+};
+function LabeledDropdownCascadeMenuPill({
+  label,
+  options,
+  value: optionValue,
+  onChange,
+  onRemove,
+  value: selection = {},
+  placeholder = "---",
+  onFocusNextGroup,
+  onFocusPreviousGroup,
+  onFocusGroupSet,
+  maxWidth,
+  minWidth,
+  ...menuProps
+}) {
+  const selectionId = Object.keys(selection)[0];
+  const selectionValues = selection[selectionId] || "";
+  const dropdownLabel = Array.isArray(selectionValues) ? getSubmenuOptionLabelById(options, selectionId) : selectionValues;
+  const handleSelectChange = ({ item, group }) => {
+    if (isFunction(onChange)) {
+      const nextSelection = group ? {
+        [group.id]: addOrRemove([...selection[group.id] || []], item, (o) => o.id)
+      } : {
+        [item.id]: item.label
+      };
+      onChange(nextSelection);
+    }
+  };
+  const removeOption = (option) => {
+    if (isFunction(onChange)) {
+      const nextSelection = {
+        [selectionId]: selectionValues.filter((val) => option.id !== val.id)
+      };
+      onChange(nextSelection);
+    }
+    onRemove(option);
+  };
+  return /* @__PURE__ */ React2.createElement(PillGroup, {
+    onFocusGroupSet,
+    onFocusNextGroup,
+    onFocusPreviousGroup
+  }, /* @__PURE__ */ React2.createElement(DropdownPill, {
+    ...menuProps,
+    itemsRenderer: renderMenuItems,
+    label: dropdownLabel || placeholder,
+    maxWidth,
+    minWidth,
+    onSelectChange: handleSelectChange,
+    options,
+    selection: {
+      [selectionId]: Array.isArray(selectionValues) ? selectionValues.map((v) => v.id) : selectionValues
+    },
+    singleGroupSelection: true,
+    variant: "title"
+  }), Array.isArray(selectionValues) && selectionValues.map((option) => /* @__PURE__ */ React2.createElement(RemovablePill, {
+    key: option.id,
+    label: option.label,
+    onRemove: () => removeOption(option)
+  })));
+}
+var LabeledDropdownCascadeMenuPill_default = LabeledDropdownCascadeMenuPill;
+export {
+  LabeledDropdownCascadeMenuPill,
+  LabeledDropdownCascadeMenuPill_default as default
+};
+//# sourceMappingURL=LabeledDropdownCascadeMenuPill.js.map

package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { isFunction, addOrRemove } from '@elliemae/ds-utilities';\nimport { PillGroup } from '../PillGroup';\nimport { RemovablePill } from '../RemovablePill';\nimport { DropdownPill } from '../DropdownPill';\n\nfunction renderMenuItems(options, factory) {\n  return options.map((option, index) => {\n    const ItemComponent = factory('radio');\n\n    if (option.type === 'submenu') {\n      const SubmenuComponent = factory('submenu');\n      const ChildComponent = factory('selection-group');\n      return (\n        <SubmenuComponent {...option} key={option.id} item={option}>\n          <ChildComponent\n            {...option}\n            id={option.id}\n            item={option}\n            items={option.items}\n            itemValueAccessor={(item) => item}\n            multi\n          />\n        </SubmenuComponent>\n      );\n    }\n\n    return <ItemComponent {...option} key={option.id || index} item={option} />;\n  });\n}\n\nconst getSubmenuOptionLabelById = (options, id) => {\n  const index = options.findIndex((option) => option.id === id);\n  return index ? options[index].label : '';\n};\n\nfunction LabeledDropdownCascadeMenuPill({\n  label,\n  options,\n  value: optionValue,\n  onChange,\n  onRemove,\n  value: selection = {},\n  placeholder = '---',\n  onFocusNextGroup,\n  onFocusPreviousGroup,\n  onFocusGroupSet,\n  maxWidth,\n  minWidth,\n  ...menuProps\n}) {\n  const selectionId = Object.keys(selection)[0];\n  const selectionValues = selection[selectionId] || '';\n  const dropdownLabel = Array.isArray(selectionValues)\n    ? getSubmenuOptionLabelById(options, selectionId)\n    : selectionValues;\n\n  const handleSelectChange = ({ item, group }) => {\n    if (isFunction(onChange)) {\n      const nextSelection = group\n        ? {\n            [group.id]: addOrRemove([...(selection[group.id] || [])], item, (o) => o.id),\n          }\n        : {\n            [item.id]: item.label,\n          };\n      onChange(nextSelection);\n    }\n  };\n\n  const removeOption = (option) => {\n    if (isFunction(onChange)) {\n      const nextSelection = {\n        [selectionId]: selectionValues.filter((val) => option.id !== val.id),\n      };\n      onChange(nextSelection);\n    }\n    onRemove(option);\n  };\n\n  return (\n    <PillGroup\n      onFocusGroupSet={onFocusGroupSet}\n      onFocusNextGroup={onFocusNextGroup}\n      onFocusPreviousGroup={onFocusPreviousGroup}\n    >\n      <DropdownPill\n        {...menuProps}\n        itemsRenderer={renderMenuItems}\n        label={dropdownLabel || placeholder}\n        maxWidth={maxWidth}\n        minWidth={minWidth}\n        onSelectChange={handleSelectChange}\n        options={options}\n        selection={{\n          [selectionId]: Array.isArray(selectionValues) ? selectionValues.map((v) => v.id) : selectionValues,\n        }}\n        singleGroupSelection\n        variant=\"title\"\n      />\n      {Array.isArray(selectionValues) &&\n        selectionValues.map((option) => (\n          <RemovablePill key={option.id} label={option.label} onRemove={() => removeOption(option)} />\n        ))}\n    </PillGroup>\n  );\n}\n\nexport { LabeledDropdownCascadeMenuPill };\nexport default LabeledDropdownCascadeMenuPill;"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,yBAAyB,SAAS,SAAS;AACzC,SAAO,QAAQ,IAAI,CAAC,QAAQ,UAAU;AACpC,UAAM,gBAAgB,QAAQ;AAE9B,QAAI,OAAO,SAAS,WAAW;AAC7B,YAAM,mBAAmB,QAAQ;AACjC,YAAM,iBAAiB,QAAQ;AAC/B,aACE,qCAAC,kBAAD;AAAA,WAAsB;AAAA,QAAQ,KAAK,OAAO;AAAA,QAAI,MAAM;AAAA,SAClD,qCAAC,gBAAD;AAAA,WACM;AAAA,QACJ,IAAI,OAAO;AAAA,QACX,MAAM;AAAA,QACN,OAAO,OAAO;AAAA,QACd,mBAAmB,CAAC,SAAS;AAAA,QAC7B,OAAK;AAAA;AAAA;AAMb,WAAO,qCAAC,eAAD;AAAA,SAAmB;AAAA,MAAQ,KAAK,OAAO,MAAM;AAAA,MAAO,MAAM;AAAA;AAAA;AAAA;AAIrE,MAAM,4BAA4B,CAAC,SAAS,OAAO;AACjD,QAAM,QAAQ,QAAQ,UAAU,CAAC,WAAW,OAAO,OAAO;AAC1D,SAAO,QAAQ,QAAQ,OAAO,QAAQ;AAAA;AAGxC,wCAAwC;AAAA,EACtC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,OAAO,YAAY;AAAA,EACnB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GACF;AACD,QAAM,cAAc,OAAO,KAAK,WAAW;AAC3C,QAAM,kBAAkB,UAAU,gBAAgB;AAClD,QAAM,gBAAgB,MAAM,QAAQ,mBAChC,0BAA0B,SAAS,eACnC;AAEJ,QAAM,qBAAqB,CAAC,EAAE,MAAM,YAAY;AAC9C,QAAI,WAAW,WAAW;AACxB,YAAM,gBAAgB,QAClB;AAAA,SACG,MAAM,KAAK,YAAY,CAAC,GAAI,UAAU,MAAM,OAAO,KAAM,MAAM,CAAC,MAAM,EAAE;AAAA,UAE3E;AAAA,SACG,KAAK,KAAK,KAAK;AAAA;AAEtB,eAAS;AAAA;AAAA;AAIb,QAAM,eAAe,CAAC,WAAW;AAC/B,QAAI,WAAW,WAAW;AACxB,YAAM,gBAAgB;AAAA,SACnB,cAAc,gBAAgB,OAAO,CAAC,QAAQ,OAAO,OAAO,IAAI;AAAA;AAEnE,eAAS;AAAA;AAEX,aAAS;AAAA;AAGX,SACE,qCAAC,WAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,KAEA,qCAAC,cAAD;AAAA,OACM;AAAA,IACJ,eAAe;AAAA,IACf,OAAO,iBAAiB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA,WAAW;AAAA,OACR,cAAc,MAAM,QAAQ,mBAAmB,gBAAgB,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA;AAAA,IAErF,sBAAoB;AAAA,IACpB,SAAQ;AAAA,MAET,MAAM,QAAQ,oBACb,gBAAgB,IAAI,CAAC,WACnB,qCAAC,eAAD;AAAA,IAAe,KAAK,OAAO;AAAA,IAAI,OAAO,OAAO;AAAA,IAAO,UAAU,MAAM,aAAa;AAAA;AAAA;AAO3F,IAAO,yCAAQ;",
+  "names": []
+}

package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js

@@ -0,0 +1,116 @@
+import * as React from "react";
+import React2, { useState, useEffect, useCallback } from "react";
+import { find } from "lodash";
+import { isFunction, addOrRemove } from "@elliemae/ds-utilities";
+import { RemovablePill } from "../RemovablePill";
+import { Pill } from "../Pill";
+import { OverflowPill } from "../OverflowPill";
+import { DropdownPill } from "../DropdownPill";
+function LabeledDropdownMultiPills({
+  label,
+  options = [],
+  value = [],
+  onSelect = () => null,
+  onRemove = () => null,
+  onChange,
+  maxWidth,
+  minWidth,
+  ...menuProps
+}) {
+  const [totalDefaultOptions, setTotalDefaultOptions] = useState(0);
+  const [selectedOptions, setSelectedOptions] = useState(value);
+  const [allOptions, setAllOptions] = useState(options);
+  const [overflowOptions, setOverflowOptions] = useState([]);
+  const overflowQuantity = 3;
+  useEffect(() => setSelectedOptions(value), [value]);
+  useEffect(() => {
+    const newOptions = allOptions.filter((option) => option.fixedItem);
+    if (newOptions.length > 0) {
+      setSelectedOptions(newOptions);
+    }
+    setTotalDefaultOptions(newOptions.length);
+  }, []);
+  useEffect(() => {
+    if (totalDefaultOptions) {
+      const newOptions = allOptions.map((opt) => {
+        if (selectedOptions.length <= totalDefaultOptions && find(selectedOptions, { id: opt.id })) {
+          return { ...opt, fixedItem: true };
+        }
+        return { ...opt, fixedItem: false };
+      });
+      setAllOptions(newOptions);
+    }
+  }, [onSelect, onRemove, selectedOptions]);
+  useEffect(() => {
+    if (selectedOptions.length > overflowQuantity) {
+      const overflow = selectedOptions.filter((val, index) => index >= overflowQuantity);
+      setOverflowOptions(overflow);
+    }
+  }, [selectedOptions]);
+  const selectOption = useCallback((option) => {
+    if (!option.fixedItem) {
+      if (isFunction(onChange)) {
+        const nextValue = addOrRemove(selectedOptions, option, (item) => item.id);
+        setSelectedOptions(nextValue);
+        onChange(nextValue);
+      }
+      onSelect(option);
+    }
+  }, [selectedOptions]);
+  const removeOption = useCallback((option) => {
+    if (!option.fixedItem || selectedOptions.length > totalDefaultOptions) {
+      if (isFunction(onChange)) {
+        const nextValue = selectedOptions.filter((val) => option.id !== val.id);
+        setSelectedOptions(nextValue);
+        onChange(nextValue);
+      }
+      onRemove(option);
+    }
+  }, [selectedOptions]);
+  const typeOfPill = () => {
+    if (selectedOptions.length > totalDefaultOptions) {
+      return RemovablePill;
+    }
+    return Pill;
+  };
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DropdownPill, {
+    ...menuProps,
+    focusOnOpen: false,
+    label,
+    maxWidth,
+    minWidth,
+    onSelectMenuItem: selectOption,
+    options: [
+      {
+        ...menuProps,
+        type: "SelectionGroup",
+        id: "multi-selection-views",
+        multi: true,
+        items: allOptions
+      }
+    ],
+    selection: {
+      "multi-selection-views": selectedOptions ? selectedOptions.map((o) => o.id) : ""
+    },
+    variant: "title"
+  }), selectedOptions && selectedOptions.map((option, index) => {
+    const TypeOfPill = typeOfPill();
+    if (index < overflowQuantity) {
+      return /* @__PURE__ */ React2.createElement(TypeOfPill, {
+        key: option.id,
+        label: option.label,
+        onRemove: () => removeOption(option)
+      });
+    }
+    return null;
+  }), selectedOptions && selectedOptions.length > overflowQuantity && /* @__PURE__ */ React2.createElement(OverflowPill, {
+    label: `+ ${selectedOptions.length - overflowQuantity}`,
+    options: overflowOptions
+  }));
+}
+var LabeledDropdownMultiPill_default = LabeledDropdownMultiPills;
+export {
+  LabeledDropdownMultiPills,
+  LabeledDropdownMultiPill_default as default
+};
+//# sourceMappingURL=LabeledDropdownMultiPill.js.map

package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect, useCallback } from 'react';\nimport { find } from 'lodash';\nimport { isFunction, addOrRemove } from '@elliemae/ds-utilities';\nimport { RemovablePill } from '../RemovablePill';\nimport { Pill } from '../Pill';\nimport { OverflowPill } from '../OverflowPill';\nimport { DropdownPill } from '../DropdownPill';\n\nfunction LabeledDropdownMultiPills({\n  label,\n  options = [],\n  value = [],\n  onSelect = () => null,\n  onRemove = () => null,\n  onChange, // if this is defined, then it's calculating the next result onSelect or onRemove\n  maxWidth,\n  minWidth,\n  ...menuProps\n}) {\n  const [totalDefaultOptions, setTotalDefaultOptions] = useState(0);\n  const [selectedOptions, setSelectedOptions] = useState(value);\n  const [allOptions, setAllOptions] = useState(options);\n  const [overflowOptions, setOverflowOptions] = useState([]);\n\n  const overflowQuantity = 3;\n\n  useEffect(() => setSelectedOptions(value), [value]);\n\n  useEffect(() => {\n    const newOptions = allOptions.filter((option) => option.fixedItem);\n    if (newOptions.length > 0) {\n      setSelectedOptions(newOptions);\n    }\n    setTotalDefaultOptions(newOptions.length);\n  }, []);\n\n  useEffect(() => {\n    if (totalDefaultOptions) {\n      const newOptions = allOptions.map((opt) => {\n        if (selectedOptions.length <= totalDefaultOptions && find(selectedOptions, { id: opt.id })) {\n          return { ...opt, fixedItem: true };\n        }\n        return { ...opt, fixedItem: false };\n      });\n\n      setAllOptions(newOptions);\n    }\n  }, [onSelect, onRemove, selectedOptions]);\n\n  useEffect(() => {\n    if (selectedOptions.length > overflowQuantity) {\n      const overflow = selectedOptions.filter((val, index) => index >= overflowQuantity);\n      setOverflowOptions(overflow);\n    }\n  }, [selectedOptions]);\n\n  const selectOption = useCallback(\n    (option) => {\n      if (!option.fixedItem) {\n        if (isFunction(onChange)) {\n          const nextValue = addOrRemove(selectedOptions, option, (item) => item.id);\n          setSelectedOptions(nextValue);\n          onChange(nextValue);\n        }\n        onSelect(option);\n      }\n    },\n    [selectedOptions],\n  );\n\n  const removeOption = useCallback(\n    (option) => {\n      if (!option.fixedItem || selectedOptions.length > totalDefaultOptions) {\n        if (isFunction(onChange)) {\n          const nextValue = selectedOptions.filter((val) => option.id !== val.id);\n          setSelectedOptions(nextValue);\n          onChange(nextValue);\n        }\n        onRemove(option);\n      }\n    },\n    [selectedOptions],\n  );\n\n  const typeOfPill = () => {\n    if (selectedOptions.length > totalDefaultOptions) {\n      return RemovablePill;\n    }\n\n    return Pill;\n  };\n\n  return (\n    <>\n      <DropdownPill\n        {...menuProps}\n        focusOnOpen={false}\n        label={label}\n        maxWidth={maxWidth}\n        minWidth={minWidth}\n        onSelectMenuItem={selectOption}\n        options={[\n          {\n            ...menuProps,\n            type: 'SelectionGroup',\n            id: 'multi-selection-views',\n            multi: true,\n            items: allOptions,\n          },\n        ]}\n        selection={{\n          'multi-selection-views': selectedOptions ? selectedOptions.map((o) => o.id) : '',\n        }}\n        variant=\"title\"\n      />\n      {selectedOptions &&\n        selectedOptions.map((option, index) => {\n          const TypeOfPill = typeOfPill();\n          if (index < overflowQuantity) {\n            return <TypeOfPill key={option.id} label={option.label} onRemove={() => removeOption(option)} />;\n          }\n          return null;\n        })}\n      {selectedOptions && selectedOptions.length > overflowQuantity && (\n        <OverflowPill label={`+ ${selectedOptions.length - overflowQuantity}`} options={overflowOptions} />\n      )}\n    </>\n  );\n}\n\nexport { LabeledDropdownMultiPills };\nexport default LabeledDropdownMultiPills;"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,mCAAmC;AAAA,EACjC;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB,WAAW,MAAM;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GACF;AACD,QAAM,CAAC,qBAAqB,0BAA0B,SAAS;AAC/D,QAAM,CAAC,iBAAiB,sBAAsB,SAAS;AACvD,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAC7C,QAAM,CAAC,iBAAiB,sBAAsB,SAAS;AAEvD,QAAM,mBAAmB;AAEzB,YAAU,MAAM,mBAAmB,QAAQ,CAAC;AAE5C,YAAU,MAAM;AACd,UAAM,aAAa,WAAW,OAAO,CAAC,WAAW,OAAO;AACxD,QAAI,WAAW,SAAS,GAAG;AACzB,yBAAmB;AAAA;AAErB,2BAAuB,WAAW;AAAA,KACjC;AAEH,YAAU,MAAM;AACd,QAAI,qBAAqB;AACvB,YAAM,aAAa,WAAW,IAAI,CAAC,QAAQ;AACzC,YAAI,gBAAgB,UAAU,uBAAuB,KAAK,iBAAiB,EAAE,IAAI,IAAI,OAAO;AAC1F,iBAAO,KAAK,KAAK,WAAW;AAAA;AAE9B,eAAO,KAAK,KAAK,WAAW;AAAA;AAG9B,oBAAc;AAAA;AAAA,KAEf,CAAC,UAAU,UAAU;AAExB,YAAU,MAAM;AACd,QAAI,gBAAgB,SAAS,kBAAkB;AAC7C,YAAM,WAAW,gBAAgB,OAAO,CAAC,KAAK,UAAU,SAAS;AACjE,yBAAmB;AAAA;AAAA,KAEpB,CAAC;AAEJ,QAAM,eAAe,YACnB,CAAC,WAAW;AACV,QAAI,CAAC,OAAO,WAAW;AACrB,UAAI,WAAW,WAAW;AACxB,cAAM,YAAY,YAAY,iBAAiB,QAAQ,CAAC,SAAS,KAAK;AACtE,2BAAmB;AACnB,iBAAS;AAAA;AAEX,eAAS;AAAA;AAAA,KAGb,CAAC;AAGH,QAAM,eAAe,YACnB,CAAC,WAAW;AACV,QAAI,CAAC,OAAO,aAAa,gBAAgB,SAAS,qBAAqB;AACrE,UAAI,WAAW,WAAW;AACxB,cAAM,YAAY,gBAAgB,OAAO,CAAC,QAAQ,OAAO,OAAO,IAAI;AACpE,2BAAmB;AACnB,iBAAS;AAAA;AAEX,eAAS;AAAA;AAAA,KAGb,CAAC;AAGH,QAAM,aAAa,MAAM;AACvB,QAAI,gBAAgB,SAAS,qBAAqB;AAChD,aAAO;AAAA;AAGT,WAAO;AAAA;AAGT,SACE,4DACE,qCAAC,cAAD;AAAA,OACM;AAAA,IACJ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,SAAS;AAAA,MACP;AAAA,WACK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA;AAAA;AAAA,IAGX,WAAW;AAAA,MACT,yBAAyB,kBAAkB,gBAAgB,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA;AAAA,IAEhF,SAAQ;AAAA,MAET,mBACC,gBAAgB,IAAI,CAAC,QAAQ,UAAU;AACrC,UAAM,aAAa;AACnB,QAAI,QAAQ,kBAAkB;AAC5B,aAAO,qCAAC,YAAD;AAAA,QAAY,KAAK,OAAO;AAAA,QAAI,OAAO,OAAO;AAAA,QAAO,UAAU,MAAM,aAAa;AAAA;AAAA;AAEvF,WAAO;AAAA,MAEV,mBAAmB,gBAAgB,SAAS,oBAC3C,qCAAC,cAAD;AAAA,IAAc,OAAO,KAAK,gBAAgB,SAAS;AAAA,IAAoB,SAAS;AAAA;AAAA;AAOxF,IAAO,mCAAQ;",
+  "names": []
+}

package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js

@@ -0,0 +1,125 @@
+import * as React from "react";
+import React2, { useCallback, useState, useEffect, useLayoutEffect } from "react";
+import PropTypes from "prop-types";
+import { isFunction, isString, useShouldRecalculate, usePrevious } from "@elliemae/ds-utilities";
+import { DropdownPill } from "../DropdownPill";
+import { InputPill } from "../InputPill";
+import { Pill } from "../Pill";
+import { RemovablePill } from "../RemovablePill";
+import { hasOptionChanged } from "./utils";
+function LabeledDropdownSinglePill({
+  label,
+  labelIsValue = false,
+  options,
+  value,
+  onSelect = () => null,
+  onChange,
+  maxWidth,
+  minWidth,
+  fixed = false,
+  ...menuProps
+}) {
+  const [optionValue, setOptionValue] = useState(value);
+  const prevOptions = usePrevious(options);
+  const areOptionsEqual = useShouldRecalculate(hasOptionChanged(prevOptions, options));
+  useEffect(() => setOptionValue(value), [value]);
+  useEffect(() => {
+    const selectedValue = options.find((option) => option.selected);
+    if (selectedValue) {
+      setOptionValue(selectedValue);
+    } else if (!selectedValue) {
+      setOptionValue(options[0]);
+    }
+  }, [areOptionsEqual]);
+  useLayoutEffect(() => {
+    if (optionValue) {
+      const selectedValue = options.find((option) => option.id === optionValue.id);
+      setOptionValue(selectedValue);
+    }
+  }, [options]);
+  const selectOption = useCallback((option) => {
+    if (isFunction(onChange)) {
+      onChange(option);
+    }
+    setOptionValue(option);
+    onSelect(option);
+  }, [onChange, onSelect]);
+  const onChangeInputValue = useCallback(({ target: { value: inputValue } }) => {
+    const { onChangeInput } = optionValue;
+    onChangeInput && onChangeInput(inputValue);
+  }, [optionValue]);
+  const removeOption = (removedOption) => {
+    const { onRemove } = menuProps;
+    const { onChangeInput } = optionValue;
+    setOptionValue(null);
+    onChangeInput && onChangeInput("");
+    const newOption = { ...removedOption, input: "" };
+    onRemove && onRemove(newOption, removedOption);
+  };
+  const renderPill = (option, fixed2) => {
+    const { input, onChangeInput, ...otherProps } = option;
+    let SelectedPill;
+    if (isString(input)) {
+      SelectedPill = InputPill;
+    } else if (fixed2) {
+      SelectedPill = Pill;
+    } else {
+      SelectedPill = RemovablePill;
+    }
+    return /* @__PURE__ */ React2.createElement(SelectedPill, {
+      key: option.id,
+      label: option.label,
+      onChange: onChangeInputValue,
+      onRemove: (e) => removeOption(option, e),
+      value: input,
+      ...otherProps
+    });
+  };
+  const renderSelection = () => {
+    if (!labelIsValue) {
+      if (optionValue)
+        return renderPill(optionValue, fixed);
+      return /* @__PURE__ */ React2.createElement(Pill, {
+        label: "-"
+      });
+    }
+  };
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DropdownPill, {
+    ...menuProps,
+    label: !labelIsValue ? label : optionValue?.label,
+    maxWidth,
+    minWidth,
+    onSelectMenuItem: selectOption,
+    options: [
+      {
+        ...menuProps,
+        type: "SelectionGroup",
+        id: "multi-selection-views",
+        multi: false,
+        items: options,
+        closeOnClick: true
+      }
+    ],
+    selection: {
+      "multi-selection-views": optionValue ? [optionValue?.id] : ""
+    },
+    variant: "title"
+  }), renderSelection());
+}
+LabeledDropdownSinglePill.propTypes = {
+  label: PropTypes.string,
+  labelIsValue: PropTypes.bool,
+  options: PropTypes.array,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onSelect: PropTypes.func,
+  onChange: PropTypes.func,
+  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  fixed: PropTypes.bool
+};
+var LabeledDropdownSinglePill_default = LabeledDropdownSinglePill;
+export {
+  LabeledDropdownSinglePill,
+  LabeledDropdownSinglePill_default as default
+};
+//# sourceMappingURL=LabeledDropdownSinglePill.js.map

package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable mdx/no-unused-expressions */\n/* eslint-disable no-shadow */\n/* eslint-disable no-unused-expressions */\n/* eslint-disable max-lines */\nimport React, { useCallback, useState, useEffect, useLayoutEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { isFunction, isString, useShouldRecalculate, usePrevious } from '@elliemae/ds-utilities';\nimport { DropdownPill } from '../DropdownPill';\nimport { InputPill } from '../InputPill';\nimport { Pill } from '../Pill';\nimport { RemovablePill } from '../RemovablePill';\nimport { hasOptionChanged } from './utils';\n\nfunction LabeledDropdownSinglePill({\n  label,\n  labelIsValue = false,\n  options,\n  value,\n  onSelect = () => null,\n  onChange,\n  maxWidth,\n  minWidth,\n  fixed = false,\n  ...menuProps\n}) {\n  const [optionValue, setOptionValue] = useState(value);\n  const prevOptions = usePrevious(options);\n  const areOptionsEqual = useShouldRecalculate(hasOptionChanged(prevOptions, options));\n\n  useEffect(() => setOptionValue(value), [value]);\n\n  useEffect(() => {\n    const selectedValue = options.find((option) => option.selected);\n\n    if (selectedValue) {\n      setOptionValue(selectedValue);\n    } else if (!selectedValue) {\n      setOptionValue(options[0]);\n    }\n  }, [areOptionsEqual]);\n\n  useLayoutEffect(() => {\n    if (optionValue) {\n      const selectedValue = options.find((option) => option.id === optionValue.id);\n      setOptionValue(selectedValue);\n    }\n  }, [options]);\n\n  const selectOption = useCallback(\n    (option) => {\n      if (isFunction(onChange)) {\n        onChange(option);\n      }\n      setOptionValue(option);\n      onSelect(option);\n    },\n    [onChange, onSelect],\n  );\n\n  const onChangeInputValue = useCallback(\n    ({ target: { value: inputValue } }) => {\n      const { onChangeInput } = optionValue;\n\n      onChangeInput && onChangeInput(inputValue);\n    },\n    [optionValue],\n  );\n\n  const removeOption = (removedOption) => {\n    const { onRemove } = menuProps;\n    const { onChangeInput } = optionValue;\n    setOptionValue(null);\n    onChangeInput && onChangeInput('');\n    const newOption = { ...removedOption, input: '' };\n    onRemove && onRemove(newOption, removedOption);\n  };\n\n  const renderPill = (option, fixed) => {\n    const { input, onChangeInput, ...otherProps } = option;\n    let SelectedPill;\n    if (isString(input)) {\n      SelectedPill = InputPill;\n    } else if (fixed) {\n      SelectedPill = Pill;\n    } else {\n      SelectedPill = RemovablePill;\n    }\n\n    return (\n      <SelectedPill\n        key={option.id}\n        label={option.label}\n        onChange={onChangeInputValue}\n        onRemove={(e) => removeOption(option, e)}\n        value={input}\n        {...otherProps}\n      />\n    );\n  };\n\n  const renderSelection = () => {\n    if (!labelIsValue) {\n      if (optionValue) return renderPill(optionValue, fixed);\n      return <Pill label=\"-\" />;\n    }\n  };\n\n  return (\n    <>\n      <DropdownPill\n        {...menuProps}\n        label={!labelIsValue ? label : optionValue?.label}\n        maxWidth={maxWidth}\n        minWidth={minWidth}\n        onSelectMenuItem={selectOption}\n        options={[\n          {\n            ...menuProps,\n            type: 'SelectionGroup',\n            id: 'multi-selection-views',\n            multi: false,\n            items: options,\n            closeOnClick: true,\n          },\n        ]}\n        selection={{\n          'multi-selection-views': optionValue ? [optionValue?.id] : '',\n        }}\n        variant=\"title\"\n      />\n      {renderSelection()}\n    </>\n  );\n}\n\nLabeledDropdownSinglePill.propTypes = {\n  label: PropTypes.string,\n  labelIsValue: PropTypes.bool,\n  options: PropTypes.array,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  onSelect: PropTypes.func,\n  onChange: PropTypes.func,\n  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  fixed: PropTypes.bool,\n};\n\nexport { LabeledDropdownSinglePill };\nexport default LabeledDropdownSinglePill;"],
+  "mappings": "AAAA;ACIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,mCAAmC;AAAA,EACjC;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,WAAW,MAAM;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,KACL;AAAA,GACF;AACD,QAAM,CAAC,aAAa,kBAAkB,SAAS;AAC/C,QAAM,cAAc,YAAY;AAChC,QAAM,kBAAkB,qBAAqB,iBAAiB,aAAa;AAE3E,YAAU,MAAM,eAAe,QAAQ,CAAC;AAExC,YAAU,MAAM;AACd,UAAM,gBAAgB,QAAQ,KAAK,CAAC,WAAW,OAAO;AAEtD,QAAI,eAAe;AACjB,qBAAe;AAAA,eACN,CAAC,eAAe;AACzB,qBAAe,QAAQ;AAAA;AAAA,KAExB,CAAC;AAEJ,kBAAgB,MAAM;AACpB,QAAI,aAAa;AACf,YAAM,gBAAgB,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,YAAY;AACzE,qBAAe;AAAA;AAAA,KAEhB,CAAC;AAEJ,QAAM,eAAe,YACnB,CAAC,WAAW;AACV,QAAI,WAAW,WAAW;AACxB,eAAS;AAAA;AAEX,mBAAe;AACf,aAAS;AAAA,KAEX,CAAC,UAAU;AAGb,QAAM,qBAAqB,YACzB,CAAC,EAAE,QAAQ,EAAE,OAAO,mBAAmB;AACrC,UAAM,EAAE,kBAAkB;AAE1B,qBAAiB,cAAc;AAAA,KAEjC,CAAC;AAGH,QAAM,eAAe,CAAC,kBAAkB;AACtC,UAAM,EAAE,aAAa;AACrB,UAAM,EAAE,kBAAkB;AAC1B,mBAAe;AACf,qBAAiB,cAAc;AAC/B,UAAM,YAAY,KAAK,eAAe,OAAO;AAC7C,gBAAY,SAAS,WAAW;AAAA;AAGlC,QAAM,aAAa,CAAC,QAAQ,WAAU;AACpC,UAAM,EAAE,OAAO,kBAAkB,eAAe;AAChD,QAAI;AACJ,QAAI,SAAS,QAAQ;AACnB,qBAAe;AAAA,eACN,QAAO;AAChB,qBAAe;AAAA,WACV;AACL,qBAAe;AAAA;AAGjB,WACE,qCAAC,cAAD;AAAA,MACE,KAAK,OAAO;AAAA,MACZ,OAAO,OAAO;AAAA,MACd,UAAU;AAAA,MACV,UAAU,CAAC,MAAM,aAAa,QAAQ;AAAA,MACtC,OAAO;AAAA,SACH;AAAA;AAAA;AAKV,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,cAAc;AACjB,UAAI;AAAa,eAAO,WAAW,aAAa;AAChD,aAAO,qCAAC,MAAD;AAAA,QAAM,OAAM;AAAA;AAAA;AAAA;AAIvB,SACE,4DACE,qCAAC,cAAD;AAAA,OACM;AAAA,IACJ,OAAO,CAAC,eAAe,QAAQ,aAAa;AAAA,IAC5C;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,SAAS;AAAA,MACP;AAAA,WACK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,cAAc;AAAA;AAAA;AAAA,IAGlB,WAAW;AAAA,MACT,yBAAyB,cAAc,CAAC,aAAa,MAAM;AAAA;AAAA,IAE7D,SAAQ;AAAA,MAET;AAAA;AAKP,0BAA0B,YAAY;AAAA,EACpC,OAAO,UAAU;AAAA,EACjB,cAAc,UAAU;AAAA,EACxB,SAAS,UAAU;AAAA,EACnB,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,EACxD,UAAU,UAAU;AAAA,EACpB,UAAU,UAAU;AAAA,EACpB,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,EAC3D,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,EAC3D,OAAO,UAAU;AAAA;AAInB,IAAO,oCAAQ;",
+  "names": []
+}

package/dist/esm/deprecated/LabeledDropdownPillsTypes/utils.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { isEqual } from "@elliemae/ds-utilities";
+import { omit } from "lodash";
+const hasOptionChanged = (prevOptions, options) => {
+  if (prevOptions && options) {
+    const prevOptionsOmited = prevOptions.map((option) => omit(option, ["input", "onChangeInput", "mask"]));
+    const optionsOmited = options.map((option) => omit(option, ["input", "onChangeInput", "mask"]));
+    return isEqual(prevOptionsOmited, optionsOmited);
+  }
+  return false;
+};
+export {
+  hasOptionChanged
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/deprecated/LabeledDropdownPillsTypes/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/deprecated/LabeledDropdownPillsTypes/utils.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { isEqual } from '@elliemae/ds-utilities';\nimport { omit } from 'lodash';\n\nexport const hasOptionChanged = (prevOptions, options) => {\n  if (prevOptions && options) {\n    const prevOptionsOmited = prevOptions.map((option) => omit(option, ['input', 'onChangeInput', 'mask']));\n    const optionsOmited = options.map((option) => omit(option, ['input', 'onChangeInput', 'mask']));\n\n    return isEqual(prevOptionsOmited, optionsOmited);\n  }\n\n  return false;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,mBAAmB,CAAC,aAAa,YAAY;AACxD,MAAI,eAAe,SAAS;AAC1B,UAAM,oBAAoB,YAAY,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC,SAAS,iBAAiB;AAC9F,UAAM,gBAAgB,QAAQ,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC,SAAS,iBAAiB;AAEtF,WAAO,QAAQ,mBAAmB;AAAA;AAGpC,SAAO;AAAA;",
+  "names": []
+}

package/dist/esm/deprecated/LabeledPills.js

@@ -0,0 +1,46 @@
+import * as React from "react";
+import React2 from "react";
+import { PropTypes, describe } from "react-desc";
+import { PillGroup } from "./PillGroup";
+import { RemovablePill } from "./RemovablePill";
+import { Pill } from "./Pill";
+function LabeledPills({
+  children,
+  label = "",
+  leftAddon,
+  onFocusGroupSet,
+  onFocusNextGroup,
+  onFocusPreviousGroup
+}) {
+  return /* @__PURE__ */ React2.createElement(PillGroup, {
+    onFocusGroupSet,
+    onFocusNextGroup,
+    onFocusPreviousGroup
+  }, /* @__PURE__ */ React2.createElement(Pill, {
+    label,
+    leftAddon,
+    variant: "title",
+    "data-testid": "pill-title"
+  }), children);
+}
+const props = {
+  label: PropTypes.string.isRequired.description("pill text label"),
+  children: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf([
+      PropTypes.instanceOf(Pill),
+      PropTypes.instanceOf(RemovablePill)
+    ])
+  })).isRequired.description("pill to add the label to"),
+  leftAddon: PropTypes.node.description("addon component to left"),
+  onFocusNextGroup: PropTypes.func.description("focus next group callback"),
+  onFocusPreviousGroup: PropTypes.func.description("focus prev group callback"),
+  onFocusGroupSet: PropTypes.func.description("focus group set callback")
+};
+LabeledPills.propTypes = props;
+const DSLabeledPillsWithSchema = describe(LabeledPills);
+DSLabeledPillsWithSchema.propTypes = props;
+export {
+  DSLabeledPillsWithSchema,
+  LabeledPills
+};
+//# sourceMappingURL=LabeledPills.js.map