@elliemae/ds-pills 2.2.0 → 2.3.0-alpha.3

package/esm/components/types/InputPill.js

@@ -1,43 +1,31 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import React, { useRef, useMemo, useCallback, useState } from 'react';
-import { uid } from 'uid';
-import { CloseXsmall } from '@elliemae/ds-icons';
-import { StyledInputPillWrapper } from '../styled.js';
-import { setMultipleRefs } from '../../utils.js';
-import { DSPillButton } from '../PillButton.js';
-
-const InputPill = /*#__PURE__*/React.memo(_ref => {
-  let {
-    label,
-    size,
-    inputPlaceholder,
-    inputWidth,
-    inputRender,
-    onInputChange,
-    onInputClear,
-    innerRef
-  } = _ref;
+import * as React from "react";
+import React2, { useCallback, useMemo, useRef, useState } from "react";
+import { uid } from "uid";
+import { CloseXsmall } from "@elliemae/ds-icons";
+import { StyledInputPillWrapper } from "../styled";
+import { setMultipleRefs } from "../../utils";
+import { DSPillButton } from "../PillButton";
+const InputPill = React2.memo(({ label, size, inputPlaceholder, inputWidth, inputRender, onInputChange, onInputClear, innerRef }) => {
   const ref = useRef(null);
   const InputComponent = useMemo(() => inputRender, [inputRender]);
-  const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
-  const onCloseIconClick = useCallback(e => {
-    if ([undefined, 'Enter', 'Space'].includes(e.code)) {
+  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
+  const onCloseIconClick = useCallback((e) => {
+    if ([void 0, "Enter", "Space"].includes(e.code)) {
       e.preventDefault();
       onInputClear(e);
       ref.current.focus();
     }
   }, [onInputClear]);
   const [inputHasFocus, setInputHasFocus] = useState(false);
-  return /*#__PURE__*/_jsx(StyledInputPillWrapper, {
-    size: size,
+  return /* @__PURE__ */ React2.createElement(StyledInputPillWrapper, {
+    size,
     className: "ds-pill-wrapper",
     "data-testid": "ds-pill-wrapper",
-    cols: label === '' ? ['auto'] : ['auto', '24px'],
-    inputWidth: inputWidth,
+    cols: label === "" ? ["auto"] : ["auto", "24px"],
+    inputWidth,
     value: label,
-    inputHasFocus: inputHasFocus
-  }, void 0, /*#__PURE__*/_jsx(InputComponent, {
+    inputHasFocus
+  }, /* @__PURE__ */ React2.createElement(InputComponent, {
     id: pillUid,
     className: "ds-pill-focus-point",
     "data-testid": "ds-pill-input",
@@ -48,18 +36,20 @@ const InputPill = /*#__PURE__*/React.memo(_ref => {
     onFocus: () => setInputHasFocus(true),
     onBlur: () => setInputHasFocus(false),
     disableTooltip: false
-  }), label !== '' && /*#__PURE__*/_jsx(DSPillButton, {
+  }), label !== "" && /* @__PURE__ */ React2.createElement(DSPillButton, {
     id: pillUid,
     "data-testid": "ds-pill-clear-icon",
-    innerRef: innerRef,
+    innerRef,
     onClick: onCloseIconClick,
     onKeyDown: onCloseIconClick,
     "aria-label": "Clear input",
     type: "right"
-  }, void 0, /*#__PURE__*/_jsx(CloseXsmall, {
+  }, /* @__PURE__ */ React2.createElement(CloseXsmall, {
     size: "s",
-    color: ['brand-primary', '700']
+    color: ["brand-primary", "700"]
   })));
 });
-
-export { InputPill };
+export {
+  InputPill
+};
+//# sourceMappingURL=InputPill.js.map

package/esm/components/types/InputPill.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/InputPill.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledInputPillWrapper } from '../styled';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const InputPill = React.memo<DSPillProps>(\n  ({ label, size, inputPlaceholder, inputWidth, inputRender, onInputChange, onInputClear, innerRef }) => {\n    const ref = useRef<HTMLElement>(null);\n\n    const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const onCloseIconClick: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(\n      (e) => {\n        if ([undefined, 'Enter', 'Space'].includes(e.code)) {\n          e.preventDefault();\n          onInputClear(e);\n          ref.current.focus();\n        }\n      },\n      [onInputClear],\n    );\n\n    const [inputHasFocus, setInputHasFocus] = useState(false);\n\n    return (\n      <StyledInputPillWrapper\n        size={size}\n        className=\"ds-pill-wrapper\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={label === '' ? ['auto'] : ['auto', '24px']}\n        inputWidth={inputWidth}\n        value={label}\n        inputHasFocus={inputHasFocus}\n      >\n        <InputComponent\n          id={pillUid}\n          className=\"ds-pill-focus-point\"\n          data-testid=\"ds-pill-input\"\n          innerRef={setMultipleRefs(ref, innerRef)}\n          value={label}\n          onChange={onInputChange}\n          placeholder={inputPlaceholder}\n          onFocus={() => setInputHasFocus(true)}\n          onBlur={() => setInputHasFocus(false)}\n          disableTooltip={false}\n        />\n        {label !== '' && (\n          <DSPillButton\n            id={pillUid}\n            data-testid=\"ds-pill-clear-icon\"\n            innerRef={innerRef}\n            onClick={onCloseIconClick}\n            onKeyDown={onCloseIconClick}\n            aria-label=\"Clear input\"\n            type=\"right\"\n          >\n            <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n          </DSPillButton>\n        )}\n      </StyledInputPillWrapper>\n    );\n  },\n);\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AAEA;AACA;AACA;AAEO,MAAM,YAAY,OAAM,KAC7B,CAAC,EAAE,OAAO,MAAM,kBAAkB,YAAY,aAAa,eAAe,cAAc,eAAe;AACrG,QAAM,MAAM,OAAoB;AAEhC,QAAM,iBAAiB,QAAQ,MAAM,aAAa,CAAC;AAEnD,QAAM,UAAU,QAAQ,MAAM,WAAW,SAAS;AAElD,QAAM,mBAAyE,YAC7E,CAAC,MAAM;AACL,QAAI,CAAC,QAAW,SAAS,SAAS,SAAS,EAAE,OAAO;AAClD,QAAE;AACF,mBAAa;AACb,UAAI,QAAQ;AAAA;AAAA,KAGhB,CAAC;AAGH,QAAM,CAAC,eAAe,oBAAoB,SAAS;AAEnD,SACE,qCAAC,wBAAD;AAAA,IACE;AAAA,IACA,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,MAAM,UAAU,KAAK,CAAC,UAAU,CAAC,QAAQ;AAAA,IACzC;AAAA,IACA,OAAO;AAAA,IACP;AAAA,KAEA,qCAAC,gBAAD;AAAA,IACE,IAAI;AAAA,IACJ,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU,gBAAgB,KAAK;AAAA,IAC/B,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa;AAAA,IACb,SAAS,MAAM,iBAAiB;AAAA,IAChC,QAAQ,MAAM,iBAAiB;AAAA,IAC/B,gBAAgB;AAAA,MAEjB,UAAU,MACT,qCAAC,cAAD;AAAA,IACE,IAAI;AAAA,IACJ,eAAY;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,cAAW;AAAA,IACX,MAAK;AAAA,KAEL,qCAAC,aAAD;AAAA,IAAa,MAAK;AAAA,IAAI,OAAO,CAAC,iBAAiB;AAAA;AAAA;",
+  "names": []
+}

package/esm/components/types/LabelPill.js

@@ -1,37 +1,23 @@
-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 { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import { StyledLabelPillWrapper } from '../styled.js';
-
-const LabelPill = /*#__PURE__*/React.memo(_ref => {
-  let {
-    label,
+import * as React from "react";
+import React2 from "react";
+import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
+import { StyledLabelPillWrapper } from "../styled";
+const LabelPill = React2.memo(({ label, size, labelTruncated, iconLeft, ariaLabel }) => {
+  const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
+    value: children
+  }) : React2.Fragment;
+  return /* @__PURE__ */ React2.createElement(StyledLabelPillWrapper, {
     size,
-    labelTruncated,
-    iconLeft,
-    ariaLabel
-  } = _ref;
-  const TextComponent = labelTruncated ? _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-      value: children
-    });
-  } : React.Fragment;
-  return /*#__PURE__*/_jsx(StyledLabelPillWrapper, {
-    size: size,
     alignItems: "center",
     className: "ds-pill-wrapper ds-pill-wrapper-label",
     "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
-  }, void 0, iconLeft, /*#__PURE__*/_jsx(TextComponent, {}, void 0, label));
+  }, iconLeft, /* @__PURE__ */ React2.createElement(TextComponent, null, label));
 });
-
-export { LabelPill };
+export {
+  LabelPill
+};
+//# sourceMappingURL=LabelPill.js.map

package/esm/components/types/LabelPill.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/LabelPill.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledLabelPillWrapper } from '../styled';\n\nexport const LabelPill = React.memo<DSPillProps>(({ label, size, labelTruncated, iconLeft, ariaLabel }) => {\n  const TextComponent = labelTruncated\n    ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n    : React.Fragment;\n  return (\n    <StyledLabelPillWrapper\n      size={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-label\"\n      data-testid=\"ds-pill-wrapper\"\n      aria-label={ariaLabel || label}\n      cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse)}\n      gutter=\"xxxs\"\n      hasIcon={iconLeft !== null}\n    >\n      {iconLeft}\n      <TextComponent>{label}</TextComponent>\n    </StyledLabelPillWrapper>\n  );\n});\n"],
+  "mappings": "AAAA;ACCA;AACA;AAEA;AAEO,MAAM,YAAY,OAAM,KAAkB,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,gBAAgB;AACzG,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,OAAM;AACV,SACE,qCAAC,wBAAD;AAAA,IACE;AAAA,IACA,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,IACzB,MAAM,CAAC,YAAY,eAAe,QAAQ,OAAO,CAAC,aAAa;AAAA,IAC/D,QAAO;AAAA,IACP,SAAS,aAAa;AAAA,KAErB,UACD,qCAAC,eAAD,MAAgB;AAAA;",
+  "names": []
+}

package/esm/components/types/ReadOnlyPill.js

@@ -1,41 +1,26 @@
-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 { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import { StyledReadonlyPillWrapper } from '../styled.js';
-
-const ReadOnlyPill = /*#__PURE__*/React.memo(_ref => {
-  let {
-    label,
+import * as React from "react";
+import React2 from "react";
+import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
+import { StyledReadonlyPillWrapper } from "../styled";
+const ReadOnlyPill = React2.memo(({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel }) => {
+  const hasIconLeft = iconLeft !== null || iconRight !== null && label === "";
+  const hasIconRight = iconRight !== null || iconLeft !== null && label === "";
+  const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
+    value: children
+  }) : React2.Fragment;
+  return /* @__PURE__ */ React2.createElement(StyledReadonlyPillWrapper, {
     size,
-    labelTruncated,
-    iconLeft,
-    iconRight,
-    ariaLabel
-  } = _ref;
-  const hasIconLeft = iconLeft !== null || iconRight !== null && label === '';
-  const hasIconRight = iconRight !== null || iconLeft !== null && label === '';
-  const TextComponent = labelTruncated ? _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-      value: children
-    });
-  } : React.Fragment;
-  return /*#__PURE__*/_jsx(StyledReadonlyPillWrapper, {
-    size: size,
     alignItems: "center",
     className: "ds-pill-wrapper ds-pill-wrapper-readonly",
     "data-testid": "ds-pill-wrapper",
     "aria-label": ariaLabel || label,
-    cols: [iconLeft && 'min-content', label && 'auto', iconRight && 'min-content'].filter(notFalse => notFalse),
+    cols: [iconLeft && "min-content", label && "auto", iconRight && "min-content"].filter((notFalse) => notFalse),
     gutter: "xxxs",
-    hasIconRight: hasIconRight,
-    hasIconLeft: hasIconLeft
-  }, void 0, iconLeft, label ? /*#__PURE__*/_jsx(TextComponent, {}, void 0, label) : null, iconRight);
+    hasIconRight,
+    hasIconLeft
+  }, iconLeft, label ? /* @__PURE__ */ React2.createElement(TextComponent, null, label) : null, iconRight);
 });
-
-export { ReadOnlyPill };
+export {
+  ReadOnlyPill
+};
+//# sourceMappingURL=ReadOnlyPill.js.map

package/esm/components/types/ReadOnlyPill.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/ReadOnlyPill.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledReadonlyPillWrapper } from '../styled';\n\nexport const ReadOnlyPill = React.memo<DSPillProps>(\n  ({ label, size, labelTruncated, iconLeft, iconRight, ariaLabel }) => {\n    const hasIconLeft = iconLeft !== null || (iconRight !== null && label === '');\n    const hasIconRight = iconRight !== null || (iconLeft !== null && label === '');\n\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledReadonlyPillWrapper\n        size={size}\n        alignItems=\"center\"\n        className=\"ds-pill-wrapper ds-pill-wrapper-readonly\"\n        data-testid=\"ds-pill-wrapper\"\n        aria-label={ariaLabel || label}\n        cols={[iconLeft && 'min-content', label && 'auto', iconRight && 'min-content'].filter((notFalse) => notFalse)}\n        gutter=\"xxxs\"\n        hasIconRight={hasIconRight}\n        hasIconLeft={hasIconLeft}\n      >\n        {iconLeft}\n        {label ? <TextComponent>{label}</TextComponent> : null}\n        {iconRight}\n      </StyledReadonlyPillWrapper>\n    );\n  },\n);\n"],
+  "mappings": "AAAA;ACEA;AACA;AAEA;AAEO,MAAM,eAAe,OAAM,KAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,WAAW,gBAAgB;AACnE,QAAM,cAAc,aAAa,QAAS,cAAc,QAAQ,UAAU;AAC1E,QAAM,eAAe,cAAc,QAAS,aAAa,QAAQ,UAAU;AAE3E,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,OAAM;AAEV,SACE,qCAAC,2BAAD;AAAA,IACE;AAAA,IACA,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,IACzB,MAAM,CAAC,YAAY,eAAe,SAAS,QAAQ,aAAa,eAAe,OAAO,CAAC,aAAa;AAAA,IACpG,QAAO;AAAA,IACP;AAAA,IACA;AAAA,KAEC,UACA,QAAQ,qCAAC,eAAD,MAAgB,SAAyB,MACjD;AAAA;",
+  "names": []
+}

package/esm/components/types/RemovablePill.js

@@ -1,63 +1,50 @@
-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)) {
+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)) {
       e.preventDefault();
-      if (onKeyboardRemove) onKeyboardRemove(pillUid);
+      if (onKeyboardRemove)
+        onKeyboardRemove(pillUid);
       onRemove(e);
     }
   }, [onKeyboardRemove, onRemove, pillUid]);
-  return /*#__PURE__*/_jsx(StyledRemovablePillWrapper, {
-    size: size,
-    cols: ['auto', '24px'],
+  return /* @__PURE__ */ React2.createElement(StyledRemovablePillWrapper, {
+    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
-  }, void 0, /*#__PURE__*/_jsx(TextComponent, {}, void 0, label), /*#__PURE__*/_jsx(DSPillButton, {
+  }, /* @__PURE__ */ React2.createElement(TextComponent, null, label), /* @__PURE__ */ React2.createElement(DSPillButton, {
     className: "ds-pill-focus-point",
     id: pillUid,
     "data-testid": "ds-pill-close-icon",
-    innerRef: innerRef,
+    innerRef,
     onClick: onRemove,
-    onKeyDown: onKeyDown,
-    "aria-label": "Remove ".concat(label),
+    onKeyDown,
+    "aria-label": `Remove ${label}`,
     type: "right"
-  }, void 0, /*#__PURE__*/_jsx(CloseXsmall, {
+  }, /* @__PURE__ */ React2.createElement(CloseXsmall, {
     width: 22.65,
     height: 22.65,
-    color: ['brand-primary', '700']
+    color: ["brand-primary", "700"]
   })));
 });
-
-export { RemovablePill };
+export {
+  RemovablePill
+};
+//# sourceMappingURL=RemovablePill.js.map

package/esm/components/types/RemovablePill.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/RemovablePill.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledRemovablePillWrapper } from '../styled';\nimport { DSPillGroupV2Context } from '../PillGroup';\nimport { DSPillButton } from '../PillButton';\n\nexport const RemovablePill = React.memo<DSPillProps>(\n  ({ label, size, labelTruncated, onRemove, innerRef, ariaLabel }) => {\n    const { onKeyboardRemove } = useContext(DSPillGroupV2Context);\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    const onKeyDown: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(\n      (e) => {\n        if (['Enter', 'Space'].includes(e.code)) {\n          e.preventDefault();\n          if (onKeyboardRemove) onKeyboardRemove(pillUid);\n          onRemove(e);\n        }\n      },\n      [onKeyboardRemove, onRemove, pillUid],\n    );\n\n    return (\n      <StyledRemovablePillWrapper\n        size={size}\n        cols={['auto', '24px']}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n        className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n        data-testid=\"ds-pill-wrapper\"\n        aria-label={ariaLabel || label}\n      >\n        <TextComponent>{label}</TextComponent>\n        <DSPillButton\n          className=\"ds-pill-focus-point\"\n          id={pillUid}\n          data-testid=\"ds-pill-close-icon\"\n          innerRef={innerRef}\n          onClick={onRemove}\n          onKeyDown={onKeyDown}\n          aria-label={`Remove ${label}`}\n          type=\"right\"\n        >\n          <CloseXsmall width={22.65} height={22.65} color={['brand-primary', '700']} />\n        </DSPillButton>\n      </StyledRemovablePillWrapper>\n    );\n  },\n);\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEO,MAAM,gBAAgB,OAAM,KACjC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,gBAAgB;AAClE,QAAM,EAAE,qBAAqB,WAAW;AACxC,QAAM,UAAU,QAAQ,MAAM,WAAW,SAAS;AAElD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,OAAM;AAEV,QAAM,YAAkE,YACtE,CAAC,MAAM;AACL,QAAI,CAAC,SAAS,SAAS,SAAS,EAAE,OAAO;AACvC,QAAE;AACF,UAAI;AAAkB,yBAAiB;AACvC,eAAS;AAAA;AAAA,KAGb,CAAC,kBAAkB,UAAU;AAG/B,SACE,qCAAC,4BAAD;AAAA,IACE;AAAA,IACA,MAAM,CAAC,QAAQ;AAAA,IACf,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,IACb,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,KAEzB,qCAAC,eAAD,MAAgB,QAChB,qCAAC,cAAD;AAAA,IACE,WAAU;AAAA,IACV,IAAI;AAAA,IACJ,eAAY;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAY,UAAU;AAAA,IACtB,MAAK;AAAA,KAEL,qCAAC,aAAD;AAAA,IAAa,OAAO;AAAA,IAAO,QAAQ;AAAA,IAAO,OAAO,CAAC,iBAAiB;AAAA;AAAA;",
+  "names": []
+}

package/esm/components/types/ValuePill.js

@@ -1,45 +1,30 @@
-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,
+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, {
     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
-  }, void 0, iconLeft, tooltipValue !== '' ? /*#__PURE__*/_jsx(DSTooltipV2, {
+  }, iconLeft, tooltipValue !== "" ? /* @__PURE__ */ React2.createElement(DSTooltipV2, {
     title: tooltipValue,
-    triggerComponent: /*#__PURE__*/_jsx(StyledSpanWithTooltip, {
+    triggerComponent: /* @__PURE__ */ React2.createElement(StyledSpanWithTooltip, {
       className: "ds-pill-tooltip-value",
       tabIndex: 0
-    }, void 0, label)
-  }) : /*#__PURE__*/_jsx(TextComponent, {}, void 0, label));
+    }, label)
+  }) : /* @__PURE__ */ React2.createElement(TextComponent, null, label));
 });
-
-export { ValuePill };
+export {
+  ValuePill
+};
+//# sourceMappingURL=ValuePill.js.map

package/esm/components/types/ValuePill.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/ValuePill.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { DSTooltipV2 } from '@elliemae/ds-tooltip';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled';\n\nexport const ValuePill = React.memo<DSPillProps>(\n  ({ label, size, labelTruncated, tooltipValue, iconLeft, ariaLabel }) => {\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledValuePillWrapper\n        size={size}\n        alignItems=\"center\"\n        className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n        data-testid=\"ds-pill-wrapper\"\n        aria-label={ariaLabel || label}\n        cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse)}\n        gutter=\"xxxs\"\n        hasIcon={iconLeft !== null}\n      >\n        {iconLeft}\n        {tooltipValue !== '' ? (\n          <DSTooltipV2\n            title={tooltipValue}\n            triggerComponent={\n              <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" tabIndex={0}>\n                {label}\n              </StyledSpanWithTooltip>\n            }\n          />\n        ) : (\n          <TextComponent>{label}</TextComponent>\n        )}\n      </StyledValuePillWrapper>\n    );\n  },\n);\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AAEA;AAEO,MAAM,YAAY,OAAM,KAC7B,CAAC,EAAE,OAAO,MAAM,gBAAgB,cAAc,UAAU,gBAAgB;AACtE,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,OAAM;AAEV,SACE,qCAAC,wBAAD;AAAA,IACE;AAAA,IACA,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,IACzB,MAAM,CAAC,YAAY,eAAe,QAAQ,OAAO,CAAC,aAAa;AAAA,IAC/D,QAAO;AAAA,IACP,SAAS,aAAa;AAAA,KAErB,UACA,iBAAiB,KAChB,qCAAC,aAAD;AAAA,IACE,OAAO;AAAA,IACP,kBACE,qCAAC,uBAAD;AAAA,MAAuB,WAAU;AAAA,MAAwB,UAAU;AAAA,OAChE;AAAA,OAKP,qCAAC,eAAD,MAAgB;AAAA;",
+  "names": []
+}

package/esm/components/types/index.js

@@ -1,6 +1,8 @@
-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';
+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

package/esm/components/types/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DropdownPill';\nexport * from './InputPill';\nexport * from './LabelPill';\nexport * from './ReadOnlyPill';\nexport * from './RemovablePill';\nexport * from './ValuePill';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;",
+  "names": []
+}

package/esm/deprecated/DropdownPill.js

@@ -1,100 +1,63 @@
-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);
-
+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
+}) {
   const ref = useRef(null);
   const [chevronEl, chevronRef] = useState();
-  const {
-    focusFirst
-  } = useFocusGroupItem(ref);
-  return /*#__PURE__*/jsx(DSDropdownMenu, _objectSpread(_objectSpread({}, dropdownProps), {}, {
-    closeMenuOnItemSelection: closeMenuOnItemSelection,
-    maxWidth: maxWidth,
+  const { focusFirst } = useFocusGroupItem(ref);
+  return /* @__PURE__ */ React2.createElement(DSDropdownMenu, {
+    ...dropdownProps,
+    closeMenuOnItemSelection,
+    maxWidth,
     hideIfNotVisible: true,
-    menuProps: {
-      className: 'dropdown-pill-menu',
-      zIndex: 100
-    },
-    minWidth: minWidth,
+    menuProps: { className: "dropdown-pill-menu", zIndex: 100 },
+    minWidth,
     onClose: focusFirst,
     referenceNode: chevronEl,
-    triggerComponent: /*#__PURE__*/_jsx(Pill, {
+    triggerComponent: /* @__PURE__ */ React2.createElement(Pill, {
       "data-testid": "dropdown-pill",
       className: "dropdown-pill",
-      containerProps: _objectSpread({
-        role: 'listbox'
-      }, containerProps),
+      containerProps: { role: "listbox", ...containerProps },
       innerRef: ref,
-      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
+      label,
+      rightAddon: /* @__PURE__ */ React2.createElement("div", {
+        ref: chevronRef
+      }, /* @__PURE__ */ React2.createElement(ChevronDown, {
+        className: "dropdown-pill-chevron-down",
+        "data-testid": "dropdown-pill-button"
+      })),
+      tabIndex,
+      variant
     })
-  }));
+  });
 }
-
 const props = {
-  /** 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')
+  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")
 };
+DropdownPill.propTypes = props;
 const DSDropdownPillWithSchema = describe(DropdownPill);
 DSDropdownPillWithSchema.propTypes = props;
-
-export { DSDropdownPillWithSchema, DropdownPill };
+export {
+  DSDropdownPillWithSchema,
+  DropdownPill
+};
+//# sourceMappingURL=DropdownPill.js.map

package/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": []
+}