@elliemae/ds-pills 2.2.1 → 2.3.0-alpha.4

package/esm/components/PillGroup.js

@@ -1,53 +1,43 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import React, { createContext, useMemo, useCallback } from 'react';
-import { describe } from 'react-desc';
-import { uid } from 'uid';
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
-import { DSPillGroupPropTypes, DSPillGroupDefaultProps } from '../props.js';
-import { StyledPillGroup } from './styled.js';
-import { jsx } from 'react/jsx-runtime';
-
-const DSPillGroupV2Context = /*#__PURE__*/createContext({
+import * as React from "react";
+import React2, { createContext, useCallback, useMemo } from "react";
+import { describe } from "react-desc";
+import { uid } from "uid";
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { DSPillGroupDefaultProps, DSPillGroupPropTypes } from "../props";
+import { StyledPillGroup } from "./styled";
+const DSPillGroupV2Context = createContext({
   onKeyboardRemove: () => null
 });
-
-const DSPillGroupV2 = props => {
+const DSPillGroupV2 = (props) => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);
   useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);
-  const pillGroupUid = useMemo(() => "ds-pill-group-".concat(uid()), []);
-  const {
-    children,
-    width,
-    innerRef
-  } = propsWithDefaults;
-  const onKeyboardRemove = useCallback(pillUid => {
-    const elems = [...document.querySelectorAll("#".concat(pillGroupUid, " .ds-pill-focus-point"))];
-    const pillIndex = elems.findIndex(elem => elem.id === pillUid);
-
+  const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);
+  const { children, width, innerRef } = propsWithDefaults;
+  const onKeyboardRemove = useCallback((pillUid) => {
+    const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
+    const pillIndex = elems.findIndex((elem) => elem.id === pillUid);
     if (pillIndex > 0) {
       elems[pillIndex - 1].focus();
     } else if (pillIndex + 1 < elems.length) {
       elems[pillIndex + 1].focus();
     }
   }, [pillGroupUid]);
-  return /*#__PURE__*/_jsx(DSPillGroupV2Context.Provider, {
-    value: {
-      onKeyboardRemove
-    }
-  }, void 0, /*#__PURE__*/jsx(StyledPillGroup, {
-    width: width,
+  return /* @__PURE__ */ React2.createElement(DSPillGroupV2Context.Provider, {
+    value: { onKeyboardRemove }
+  }, /* @__PURE__ */ React2.createElement(StyledPillGroup, {
+    width,
     id: pillGroupUid,
-    cols: React.Children.map(children, () => 'auto'),
+    cols: React2.Children.map(children, () => "auto"),
     gutter: "2px",
-    ref: innerRef,
-    children: children
-  }));
+    ref: innerRef
+  }, children));
 };
-
+DSPillGroupV2.propTypes = DSPillGroupPropTypes;
 const DSPillGroupV2WithSchema = describe(DSPillGroupV2);
 DSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes;
-
-export { DSPillGroupV2, DSPillGroupV2Context, DSPillGroupV2WithSchema };
+export {
+  DSPillGroupV2,
+  DSPillGroupV2Context,
+  DSPillGroupV2WithSchema
+};
+//# sourceMappingURL=PillGroup.js.map

package/esm/components/PillGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/PillGroup.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { describe } from 'react-desc';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { DSPillGroupProps } from '../index.d';\nimport { DSPillGroupDefaultProps, DSPillGroupPropTypes } from '../props';\nimport { StyledPillGroup } from './styled';\n\nexport const DSPillGroupV2Context = createContext<{ onKeyboardRemove: (pillUid: string) => void }>({\n  onKeyboardRemove: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType<DSPillGroupProps> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);\n\n  const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);\n  const { children, width, innerRef } = propsWithDefaults;\n  const onKeyboardRemove = useCallback(\n    (pillUid: string) => {\n      const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n      const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n      if (pillIndex > 0) {\n        elems[pillIndex - 1].focus();\n      } else if (pillIndex + 1 < elems.length) {\n        elems[pillIndex + 1].focus();\n      }\n    },\n    [pillGroupUid],\n  );\n\n  return (\n    <DSPillGroupV2Context.Provider value={{ onKeyboardRemove }}>\n      <StyledPillGroup\n        width={width}\n        id={pillGroupUid}\n        cols={React.Children.map(children, () => 'auto')}\n        gutter=\"2px\"\n        ref={innerRef}\n      >\n        {children}\n      </StyledPillGroup>\n    </DSPillGroupV2Context.Provider>\n  );\n};\n\nDSPillGroupV2.propTypes = DSPillGroupPropTypes;\nconst DSPillGroupV2WithSchema = describe(DSPillGroupV2);\nDSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes;\n\nexport { DSPillGroupV2, DSPillGroupV2WithSchema };\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA;AACA;AAEO,MAAM,uBAAuB,cAA+D;AAAA,EACjG,kBAAkB,MAAM;AAAA;AAG1B,MAAM,gBAAuD,CAAC,UAAU;AACtE,QAAM,oBAAoB,6BAA6B,OAAO;AAC9D,iCAA+B,mBAAmB;AAElD,QAAM,eAAe,QAAQ,MAAM,iBAAiB,SAAS;AAC7D,QAAM,EAAE,UAAU,OAAO,aAAa;AACtC,QAAM,mBAAmB,YACvB,CAAC,YAAoB;AACnB,UAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI;AAEhD,UAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO;AAExD,QAAI,YAAY,GAAG;AACjB,YAAM,YAAY,GAAG;AAAA,eACZ,YAAY,IAAI,MAAM,QAAQ;AACvC,YAAM,YAAY,GAAG;AAAA;AAAA,KAGzB,CAAC;AAGH,SACE,qCAAC,qBAAqB,UAAtB;AAAA,IAA+B,OAAO,EAAE;AAAA,KACtC,qCAAC,iBAAD;AAAA,IACE;AAAA,IACA,IAAI;AAAA,IACJ,MAAM,OAAM,SAAS,IAAI,UAAU,MAAM;AAAA,IACzC,QAAO;AAAA,IACP,KAAK;AAAA,KAEJ;AAAA;AAMT,cAAc,YAAY;AAC1B,MAAM,0BAA0B,SAAS;AACzC,wBAAwB,YAAY;",
+  "names": []
+}

package/esm/components/index.js

@@ -1,3 +1,5 @@
-export { DSPillV2, DSPillV2WithSchema } from './Pill.js';
-export { DSPillGroupV2, DSPillGroupV2Context, DSPillGroupV2WithSchema } from './PillGroup.js';
-export { DSPillButton, DSPillButtonWithSchema } from './PillButton.js';
+import * as React from "react";
+export * from "./Pill";
+export * from "./PillGroup";
+export * from "./PillButton";
+//# sourceMappingURL=index.js.map

package/esm/components/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Pill';\nexport * from './PillGroup';\nexport * from './PillButton';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;",
+  "names": []
+}

package/esm/components/styled.js

@@ -1,67 +1,206 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import styled from 'styled-components';
-import { css } from '@elliemae/ds-system';
-import Grid from '@elliemae/ds-grid';
-import { DSButtonV2 } from '@elliemae/ds-button';
-
-var _templateObject, _templateObject2;
-// Common CSS
-// =============================================================================
-
-const borderOutside = function (color) {
-  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  let zIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
-  let borderRadius = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '12px';
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  :after {\n    content: ' ';\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    border: ", "px solid ", ";\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    pointer-events: none;\n    z-index: ", ";\n  }\n"])), size, color, borderRadius, borderRadius, borderRadius, borderRadius, zIndex);
-};
+import * as React from "react";
+import styled from "styled-components";
+import { css } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { DSButtonV2 } from "@elliemae/ds-button";
+const borderOutside = (color, size = 1, zIndex = 2, borderRadius = "12px") => css`
+  :after {
+    content: ' ';
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: ${size}px solid ${color};
+    border-top-left-radius: ${borderRadius};
+    border-top-right-radius: ${borderRadius};
+    border-bottom-left-radius: ${borderRadius};
+    border-bottom-right-radius: ${borderRadius};
+    pointer-events: none;
+    z-index: ${zIndex};
+  }
+`;
+const commonPillWrapperCss = css`
+  height: ${(props) => props?.size === "m" ? "24px" : "18px"};
+
+  position: relative;
+
+  width: fit-content;
+
+  background-color: ${(props) => props.theme.colors.brand[200]};
+
+  outline: none;
+
+  white-space: nowrap;
+
+  padding: 0px 12px 0 12px;
+  border-radius: 12px;
+
+  font-size: 13px;
+  line-height: 1;
+  color: ${(props) => props.theme.colors.brand[800]};
+  ${(props) => borderOutside(props.theme.colors.brand[300])};
+`;
+const StyledLabelPillWrapper = styled(Grid)`
+  ${commonPillWrapperCss}
+
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
+`;
+const StyledValuePillWrapper = styled(Grid)`
+  ${commonPillWrapperCss}
+
+  font-weight: ${(props) => props.theme.fontWeights.regular};
+  padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
+`;
+const StyledInputPillWrapper = styled(Grid)`
+  ${commonPillWrapperCss}
+
+  background: ${(props) => props.theme.colors.neutral["000"]};
+  padding: 0;
+
+  ${({ value, theme }) => borderOutside(value === "" ? theme.colors.neutral[400] : theme.colors.brand[500])}
+
+  :focus-within {
+    ${(props) => props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : ""}
+  }
+
+  :active {
+    ${(props) => props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : ""}
+  }
 
-const commonPillWrapperCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: ", ";\n\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ", ";\n\n  outline: none;\n\n  white-space: nowrap;\n\n  padding: 0px 12px 0 12px;\n  border-radius: 12px;\n\n  font-size: 13px;\n  line-height: 1;\n  color: ", ";\n  ", ";\n"])), props => (props === null || props === void 0 ? void 0 : props.size) === 'm' ? '24px' : '18px', props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => borderOutside(props.theme.colors.brand[300])); // =============================================================================
-// Pills wrappers
-// =============================================================================
-
-const StyledLabelPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-0"
-})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.semibold, props => props.hasIcon ? '0px !important' : '12px');
-const StyledValuePillWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-1"
-})(["", " font-weight:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.regular, props => props.hasIcon ? '0px !important' : '12px');
-const StyledInputPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-2"
-})(["", " background:", ";padding:0;", ":focus-within{", "}:active{", "}& .em-ds-input{outline:none !important;border:none !important;box-shadow:none !important;border-radius:0 !important;height:100%;background:transparent;width:", ";padding:0;margin:0 0 0 8px;}& .em-ds-input__tooltip-ref{height:100%;}"], commonPillWrapperCss, props => props.theme.colors.neutral['000'], _ref => {
-  let {
-    value,
-    theme
-  } = _ref;
-  return borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500]);
-}, props => props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '', props => props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '', props => "".concat(props.inputWidth + (props.value === '' ? 24 : 0), "px"));
-const StyledDropdownPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-3"
-})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.semibold);
-const StyledReadonlyPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-4"
-})(["", " font-weight:", ";padding-right:", ";padding-left:", ";"], commonPillWrapperCss, props => props.theme.fontWeights.semibold, props => props.hasIconRight ? '0 !important' : '12px', props => props.hasIconLeft ? '0 !important' : '12px');
-const StyledRemovablePillWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-5"
-})(["", " font-weight:", ";padding:0 0 0 12px;"], commonPillWrapperCss, props => props.theme.fontWeights.regular); // =============================================================================
-// Pill group
-// =============================================================================
-
-const StyledPillGroup = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-j0tlch-6"
-})(["width:", ";& .ds-pill-wrapper{&:not(:first-of-type){&,:after,:before,.ds-pill-tooltip-value:after{border-top-left-radius:0px;border-bottom-left-radius:0px;}}&:not(:last-of-type){&,:after,:before,.ds-pill-tooltip-value:after{border-top-right-radius:0px;border-bottom-right-radius:0px;}}}& .ds-pill-wrapper-label,& .ds-pill-wrapper-value,& .ds-pill-wrapper-readonly{&:not(:first-of-type){padding-left:8px;}&:not(:last-of-type){padding-right:8px;}}& .ds-pill-wrapper-removable:not(:first-of-type){padding-left:8px;}& .ds-pill-wrapper-dropdown:not(:first-of-type){padding-left:8px;}& .ds-pill-wrapper{:not(:first-of-type){.ds-pill-button-left{border-radius:0px;}.ds-pill-button-only{border-top-left-radius:0px;border-bottom-left-radius:0px;}}:not(:last-of-type){.ds-pill-button-right{border-radius:0px;}.ds-pill-button-only{border-top-right-radius:0px;border-bottom-right-radius:0px;}}}"], _ref2 => {
-  let {
-    width
-  } = _ref2;
-  return width;
-}); // =============================================================================
-// Extra stuff
-// =============================================================================
-
-const StyledSpanWithTooltip = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-j0tlch-7"
-})(["outline:none;:focus{", "}"], props => borderOutside(props.theme.colors.brand[700], 2, 3));
-const StyledPillButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-j0tlch-8"
-})(["display:grid;place-items:center;position:relative;padding:0;width:", ";height:", ";border-radius:12px;:focus{", "}cursor:pointer;"], props => props.width, props => props.height, props => borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit'));
-
-export { StyledDropdownPillWrapper, StyledInputPillWrapper, StyledLabelPillWrapper, StyledPillButton, StyledPillGroup, StyledReadonlyPillWrapper, StyledRemovablePillWrapper, StyledSpanWithTooltip, StyledValuePillWrapper };
+  & .em-ds-input {
+    outline: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    height: 100%;
+    background: transparent;
+    width: ${(props) => `${props.inputWidth + (props.value === "" ? 24 : 0)}px`};
+    padding: 0;
+    margin: 0 0 0 8px;
+  }
+
+  & .em-ds-input__tooltip-ref {
+    height: 100%;
+  }
+`;
+const StyledDropdownPillWrapper = styled(Grid)`
+  ${commonPillWrapperCss}
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+
+  padding: 0 0 0 12px;
+`;
+const StyledReadonlyPillWrapper = styled(Grid)`
+  ${commonPillWrapperCss}
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  padding-right: ${(props) => props.hasIconRight ? "0 !important" : "12px"};
+  padding-left: ${(props) => props.hasIconLeft ? "0 !important" : "12px"};
+`;
+const StyledRemovablePillWrapper = styled(Grid)`
+  ${commonPillWrapperCss}
+  font-weight: ${(props) => props.theme.fontWeights.regular};
+  padding: 0 0 0 12px;
+`;
+const StyledPillGroup = styled(Grid)`
+  width: ${({ width }) => width};
+
+  // Pill edges
+  & .ds-pill-wrapper {
+    &:not(:first-of-type) {
+      &,
+      :after,
+      :before,
+      .ds-pill-tooltip-value:after {
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+      }
+    }
+    &:not(:last-of-type) {
+      &,
+      :after,
+      :before,
+      .ds-pill-tooltip-value:after {
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
+      }
+    }
+  }
+
+  // Pill paddings to the left / right
+  & .ds-pill-wrapper-label,
+  & .ds-pill-wrapper-value,
+  & .ds-pill-wrapper-readonly {
+    &:not(:first-of-type) {
+      padding-left: 8px;
+    }
+    &:not(:last-of-type) {
+      padding-right: 8px;
+    }
+  }
+
+  & .ds-pill-wrapper-removable:not(:first-of-type) {
+    padding-left: 8px;
+  }
+
+  & .ds-pill-wrapper-dropdown:not(:first-of-type) {
+    padding-left: 8px;
+  }
+
+  & .ds-pill-wrapper {
+    :not(:first-of-type) {
+      .ds-pill-button-left {
+        border-radius: 0px;
+      }
+      .ds-pill-button-only {
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+      }
+    }
+    :not(:last-of-type) {
+      .ds-pill-button-right {
+        border-radius: 0px;
+      }
+      .ds-pill-button-only {
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
+      }
+    }
+  }
+`;
+const StyledSpanWithTooltip = styled.span`
+  outline: none;
+  :focus {
+    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3)}
+  }
+`;
+const StyledPillButton = styled(DSButtonV2)`
+  display: grid;
+  place-items: center;
+
+  position: relative;
+
+  padding: 0;
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+
+  border-radius: 12px;
+
+  :focus {
+    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, "inherit")}
+  }
+
+  cursor: pointer;
+`;
+export {
+  StyledDropdownPillWrapper,
+  StyledInputPillWrapper,
+  StyledLabelPillWrapper,
+  StyledPillButton,
+  StyledPillGroup,
+  StyledReadonlyPillWrapper,
+  StyledRemovablePillWrapper,
+  StyledSpanWithTooltip,
+  StyledValuePillWrapper
+};
+//# sourceMappingURL=styled.js.map

package/esm/components/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string, size = 1, zIndex = 2, borderRadius = '12px') => css`\n  :after {\n    content: ' ';\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    border: ${size}px solid ${color};\n    border-top-left-radius: ${borderRadius};\n    border-top-right-radius: ${borderRadius};\n    border-bottom-left-radius: ${borderRadius};\n    border-bottom-right-radius: ${borderRadius};\n    pointer-events: none;\n    z-index: ${zIndex};\n  }\n`;\n\nconst commonPillWrapperCss = css<{ size: 'm' | 's' }>`\n  height: ${(props) => (props?.size === 'm' ? '24px' : '18px')};\n\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ${(props) => props.theme.colors.brand[200]};\n\n  outline: none;\n\n  white-space: nowrap;\n\n  padding: 0px 12px 0 12px;\n  border-radius: 12px;\n\n  font-size: 13px;\n  line-height: 1;\n  color: ${(props) => props.theme.colors.brand[800]};\n  ${(props) => borderOutside(props.theme.colors.brand[300])};\n`;\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledValuePillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<{ value: string; inputWidth: number; inputHasFocus: boolean }>`\n  ${commonPillWrapperCss}\n\n  background: ${(props) => props.theme.colors.neutral['000']};\n  padding: 0;\n\n  ${({ value, theme }) => borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500])}\n\n  :focus-within {\n    ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '')}\n  }\n\n  :active {\n    ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '')}\n  }\n\n  & .em-ds-input {\n    outline: none !important;\n    border: none !important;\n    box-shadow: none !important;\n    border-radius: 0 !important;\n    height: 100%;\n    background: transparent;\n    width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n    padding: 0;\n    margin: 0 0 0 8px;\n  }\n\n  & .em-ds-input__tooltip-ref {\n    height: 100%;\n  }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  padding: 0 0 0 12px;\n`;\n\nexport const StyledReadonlyPillWrapper = styled(Grid)<{ hasIconRight: boolean; hasIconLeft: boolean }>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n  padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\nexport const StyledRemovablePillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding: 0 0 0 12px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n  width: ${({ width }) => width};\n\n  // Pill edges\n  & .ds-pill-wrapper {\n    &:not(:first-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    &:not(:last-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n\n  // Pill paddings to the left / right\n  & .ds-pill-wrapper-label,\n  & .ds-pill-wrapper-value,\n  & .ds-pill-wrapper-readonly {\n    &:not(:first-of-type) {\n      padding-left: 8px;\n    }\n    &:not(:last-of-type) {\n      padding-right: 8px;\n    }\n  }\n\n  & .ds-pill-wrapper-removable:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper {\n    :not(:first-of-type) {\n      .ds-pill-button-left {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    :not(:last-of-type) {\n      .ds-pill-button-right {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n  outline: none;\n  :focus {\n    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3)}\n  }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2)<{ width: string; height: string }>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  width: ${(props) => props.width};\n  height: ${(props) => props.height};\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit')}\n  }\n\n  cursor: pointer;\n`;\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/components/types/DropdownPill.js

@@ -1,76 +1,59 @@
-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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import React, { useRef, useMemo } from 'react';
-import { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';
-import { uid } from 'uid';
-import { ChevronSmallDown } from '@elliemae/ds-icons';
-import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import { StyledDropdownPillWrapper } from '../styled.js';
-import { setMultipleRefs } from '../../utils.js';
-import { DSPillButton } from '../PillButton.js';
-import { jsx } from 'react/jsx-runtime';
-
-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 DropdownPill = /*#__PURE__*/React.memo(_ref => {
-  let {
-    label,
-    size,
-    labelTruncated,
-    dropdownProps,
-    innerRef,
-    ariaLabel,
-    onDropdownClick
-  } = _ref;
+import * as React from "react";
+import React2, { useMemo, useRef } from "react";
+import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu";
+import { uid } from "uid";
+import { ChevronSmallDown } from "@elliemae/ds-icons";
+import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
+import { StyledDropdownPillWrapper } from "../styled";
+import { setMultipleRefs } from "../../utils";
+import { DSPillButton } from "../PillButton";
+const DropdownPill = React2.memo(({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {
   const chevronRef = useRef(null);
-  const pillUid = useMemo(() => "ds-pill-".concat(uid()), []);
-  const TextComponent = labelTruncated ? _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-      value: children
-    });
-  } : React.Fragment;
-  return /*#__PURE__*/_jsx(StyledDropdownPillWrapper, {
-    size: size,
+  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
+  const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
+    value: children
+  }) : React2.Fragment;
+  return /* @__PURE__ */ React2.createElement(StyledDropdownPillWrapper, {
+    size,
     id: pillUid,
     className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
     "data-testid": "ds-pill-wrapper",
-    cols: ['auto', '24px'],
+    cols: ["auto", "24px"],
     gutter: "2px",
     alignItems: "center",
     justifyItems: "center"
-  }, void 0, /*#__PURE__*/_jsx(TextComponent, {}, void 0, label), /*#__PURE__*/jsx(DSDropdownMenuV2, _objectSpread(_objectSpread({
-    placementOrderPreference: ['bottom-start', 'bottom', 'bottom-end', 'right-end', 'top-start', 'top', 'top-end']
-  }, dropdownProps), {}, {
-    onClickOutside: e => {
-      if (e.code === 'Escape') chevronRef.current.focus();
-      if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);
-    },
-    wrapperStyles: {
-      w: '100%',
-      h: '100%'
+  }, /* @__PURE__ */ React2.createElement(TextComponent, null, label), /* @__PURE__ */ React2.createElement(DSDropdownMenuV2, {
+    placementOrderPreference: [
+      "bottom-start",
+      "bottom",
+      "bottom-end",
+      "right-end",
+      "top-start",
+      "top",
+      "top-end"
+    ],
+    ...dropdownProps,
+    onClickOutside: (e) => {
+      if (e.code === "Escape")
+        chevronRef.current.focus();
+      if (dropdownProps.onClickOutside)
+        dropdownProps.onClickOutside(e);
     },
-    children: /*#__PURE__*/_jsx(DSPillButton, {
-      className: "ds-pill-focus-point",
-      "data-testid": "ds-pill-dropdown-chevron",
-      innerRef: setMultipleRefs(chevronRef, innerRef),
-      "aria-label": ariaLabel || label,
-      type: "right",
-      onClick: onDropdownClick
-    }, void 0, /*#__PURE__*/_jsx(ChevronSmallDown, {
-      color: ['brand-primary', '800'],
-      width: 20,
-      height: 20
-    }))
-  })));
+    wrapperStyles: { w: "100%", h: "100%" }
+  }, /* @__PURE__ */ React2.createElement(DSPillButton, {
+    className: "ds-pill-focus-point",
+    "data-testid": "ds-pill-dropdown-chevron",
+    innerRef: setMultipleRefs(chevronRef, innerRef),
+    "aria-label": ariaLabel || label,
+    type: "right",
+    onClick: onDropdownClick
+  }, /* @__PURE__ */ React2.createElement(ChevronSmallDown, {
+    color: ["brand-primary", "800"],
+    width: 20,
+    height: 20
+  }))));
 });
-
-export { DropdownPill };
+export {
+  DropdownPill
+};
+//# sourceMappingURL=DropdownPill.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/DropdownPill.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef } from 'react';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled';\nimport type { DSPillProps } from '../../index.d';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const DropdownPill = React.memo<DSPillProps>(\n  ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n    const chevronRef = useRef(null);\n\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledDropdownPillWrapper\n        size={size}\n        id={pillUid}\n        className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={['auto', '24px']}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n      >\n        <TextComponent>{label}</TextComponent>\n        <DSDropdownMenuV2\n          placementOrderPreference={[\n            'bottom-start',\n            'bottom',\n            'bottom-end',\n            'right-end',\n            'top-start',\n            'top',\n            'top-end',\n          ]}\n          {...dropdownProps}\n          onClickOutside={(e) => {\n            if (e.code === 'Escape') chevronRef.current.focus();\n            if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n          }}\n          wrapperStyles={{ w: '100%', h: '100%' }}\n        >\n          <DSPillButton\n            className=\"ds-pill-focus-point\"\n            data-testid=\"ds-pill-dropdown-chevron\"\n            innerRef={setMultipleRefs(chevronRef, innerRef)}\n            aria-label={ariaLabel || label}\n            type=\"right\"\n            onClick={onDropdownClick}\n          >\n            <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n          </DSPillButton>\n        </DSDropdownMenuV2>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEO,MAAM,eAAe,OAAM,KAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,sBAAsB;AACxF,QAAM,aAAa,OAAO;AAE1B,QAAM,UAAU,QAAQ,MAAM,WAAW,SAAS;AAElD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,OAAM;AAEV,SACE,qCAAC,2BAAD;AAAA,IACE;AAAA,IACA,IAAI;AAAA,IACJ,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,MAAM,CAAC,QAAQ;AAAA,IACf,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,KAEb,qCAAC,eAAD,MAAgB,QAChB,qCAAC,kBAAD;AAAA,IACE,0BAA0B;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,OAEE;AAAA,IACJ,gBAAgB,CAAC,MAAM;AACrB,UAAI,EAAE,SAAS;AAAU,mBAAW,QAAQ;AAC5C,UAAI,cAAc;AAAgB,sBAAc,eAAe;AAAA;AAAA,IAEjE,eAAe,EAAE,GAAG,QAAQ,GAAG;AAAA,KAE/B,qCAAC,cAAD;AAAA,IACE,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU,gBAAgB,YAAY;AAAA,IACtC,cAAY,aAAa;AAAA,IACzB,MAAK;AAAA,IACL,SAAS;AAAA,KAET,qCAAC,kBAAD;AAAA,IAAkB,OAAO,CAAC,iBAAiB;AAAA,IAAQ,OAAO;AAAA,IAAI,QAAQ;AAAA;AAAA;",
+  "names": []
+}