@elliemae/ds-pills 2.4.3-rc.6 → 2.4.3

package/cjs/components/styled.js

@@ -13,10 +13,9 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 
 /* eslint-disable max-lines */
-
-// =============================================================================
 // 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;
@@ -104,11 +103,10 @@ const StyledInputPillWrapper = /*#__PURE__*/styled__default["default"](Grid__def
   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'], _ref6 => {
   let {
-    theme,
-    hasError
+    value,
+    theme
   } = _ref6;
-  if (hasError) return borderOutside(theme.colors.danger[900]);
-  return borderOutside(theme.colors.brand[500]);
+  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 => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`);
 const StyledDropdownPillWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-j0tlch-3"

package/cjs/components/types/InputPill.js

@@ -24,13 +24,11 @@ const InputPill = /*#__PURE__*/React__default["default"].memo(_ref => {
     inputRender,
     onInputChange,
     onInputClear,
-    innerRef,
-    hasError,
-    inputId
+    innerRef
   } = _ref;
   const ref = React.useRef(null);
   const InputComponent = React.useMemo(() => inputRender, [inputRender]);
-  const pillUid = React.useMemo(() => inputId ?? `ds-pill-${uid.uid()}`, []);
+  const pillUid = React.useMemo(() => `ds-pill-${uid.uid()}`, []);
   const onCloseIconClick = React.useCallback(e => {
     if ([undefined, 'Enter', 'Space'].includes(e.code)) {
       e.preventDefault();
@@ -46,8 +44,7 @@ const InputPill = /*#__PURE__*/React__default["default"].memo(_ref => {
     cols: label === '' ? ['auto'] : ['auto', '24px'],
     inputWidth: inputWidth,
     value: label,
-    inputHasFocus: inputHasFocus,
-    hasError: hasError
+    inputHasFocus: inputHasFocus
   }, void 0, /*#__PURE__*/_jsx__default["default"](InputComponent, {
     id: pillUid,
     className: "ds-pill-focus-point",

package/cjs/props.js

@@ -22,11 +22,8 @@ const DSPillV2PropTypes = {
   onInputChange: reactDesc.PropTypes.func.description('Callback triggered when user provides input to the input pill').defaultValue(() => null),
   onInputClear: reactDesc.PropTypes.func.description('Callback triggered when the user clears an input pill').defaultValue(() => null),
   inputWidth: reactDesc.PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),
-  inputId: reactDesc.PropTypes.string.description('ID for the input pill').defaultValue(undefined),
   dropdownProps: reactDesc.PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),
-  onDropdownClick: reactDesc.PropTypes.func.description('Callback when dropdown button is clicked or pressed').defaultValue(() => null),
-  disabled: reactDesc.PropTypes.bool.description('Whether the pill should be disabled. Only for value and removable pill').defaultValue(false),
-  hasError: reactDesc.PropTypes.bool.description('Whether the pill should be in an error state. Only for input pill').defaultValue(false)
+  onDropdownClick: reactDesc.PropTypes.func.description('Callback when dropdown button is clicked or pressed').defaultValue(() => null)
 };
 const DSPillButtonPropTypes = {
   type: reactDesc.PropTypes.oneOf(['only', 'left', 'right']).description('The position in which this button will be placed. Only used for css styling internally').defaultValue('right'),
@@ -40,7 +37,6 @@ const DSPillGroupPropTypes = {
 const DSPillV2DefaultProps = {
   innerRef: () => null,
   disabled: false,
-  hasError: false,
   ariaLabel: '',
   size: 'm',
   labelTruncated: true,

package/esm/components/styled.js

@@ -4,10 +4,9 @@ import Grid from '@elliemae/ds-grid';
 import { DSButtonV2 } from '@elliemae/ds-button';
 
 /* eslint-disable max-lines */
-
-// =============================================================================
 // 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;
@@ -95,11 +94,10 @@ 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'], _ref6 => {
   let {
-    theme,
-    hasError
+    value,
+    theme
   } = _ref6;
-  if (hasError) return borderOutside(theme.colors.danger[900]);
-  return borderOutside(theme.colors.brand[500]);
+  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 => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`);
 const StyledDropdownPillWrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-j0tlch-3"

package/esm/components/types/InputPill.js

@@ -15,13 +15,11 @@ const InputPill = /*#__PURE__*/React.memo(_ref => {
     inputRender,
     onInputChange,
     onInputClear,
-    innerRef,
-    hasError,
-    inputId
+    innerRef
   } = _ref;
   const ref = useRef(null);
   const InputComponent = useMemo(() => inputRender, [inputRender]);
-  const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, []);
+  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
   const onCloseIconClick = useCallback(e => {
     if ([undefined, 'Enter', 'Space'].includes(e.code)) {
       e.preventDefault();
@@ -37,8 +35,7 @@ const InputPill = /*#__PURE__*/React.memo(_ref => {
     cols: label === '' ? ['auto'] : ['auto', '24px'],
     inputWidth: inputWidth,
     value: label,
-    inputHasFocus: inputHasFocus,
-    hasError: hasError
+    inputHasFocus: inputHasFocus
   }, void 0, /*#__PURE__*/_jsx(InputComponent, {
     id: pillUid,
     className: "ds-pill-focus-point",

package/esm/props.js

@@ -18,11 +18,8 @@ const DSPillV2PropTypes = {
   onInputChange: PropTypes.func.description('Callback triggered when user provides input to the input pill').defaultValue(() => null),
   onInputClear: PropTypes.func.description('Callback triggered when the user clears an input pill').defaultValue(() => null),
   inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),
-  inputId: PropTypes.string.description('ID for the input pill').defaultValue(undefined),
   dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),
-  onDropdownClick: PropTypes.func.description('Callback when dropdown button is clicked or pressed').defaultValue(() => null),
-  disabled: PropTypes.bool.description('Whether the pill should be disabled. Only for value and removable pill').defaultValue(false),
-  hasError: PropTypes.bool.description('Whether the pill should be in an error state. Only for input pill').defaultValue(false)
+  onDropdownClick: PropTypes.func.description('Callback when dropdown button is clicked or pressed').defaultValue(() => null)
 };
 const DSPillButtonPropTypes = {
   type: PropTypes.oneOf(['only', 'left', 'right']).description('The position in which this button will be placed. Only used for css styling internally').defaultValue('right'),
@@ -36,7 +33,6 @@ const DSPillGroupPropTypes = {
 const DSPillV2DefaultProps = {
   innerRef: () => null,
   disabled: false,
-  hasError: false,
   ariaLabel: '',
   size: 'm',
   labelTruncated: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-pills",
-  "version": "2.4.3-rc.6",
+  "version": "2.4.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Pills",
   "module": "./esm/index.js",
@@ -144,20 +144,20 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.4.3-rc.6",
-    "@elliemae/ds-classnames": "2.4.3-rc.6",
-    "@elliemae/ds-dropdownmenu": "2.4.3-rc.6",
-    "@elliemae/ds-form": "2.4.3-rc.6",
-    "@elliemae/ds-grid": "2.4.3-rc.6",
-    "@elliemae/ds-icons": "2.4.3-rc.6",
-    "@elliemae/ds-modal": "2.4.3-rc.6",
-    "@elliemae/ds-popover": "2.4.3-rc.6",
-    "@elliemae/ds-props-helpers": "2.4.3-rc.6",
-    "@elliemae/ds-shared": "2.4.3-rc.6",
-    "@elliemae/ds-system": "2.4.3-rc.6",
-    "@elliemae/ds-tooltip": "2.4.3-rc.6",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.6",
-    "@elliemae/ds-utilities": "2.4.3-rc.6",
+    "@elliemae/ds-button": "2.4.3",
+    "@elliemae/ds-classnames": "2.4.3",
+    "@elliemae/ds-dropdownmenu": "2.4.3",
+    "@elliemae/ds-form": "2.4.3",
+    "@elliemae/ds-grid": "2.4.3",
+    "@elliemae/ds-icons": "2.4.3",
+    "@elliemae/ds-modal": "2.4.3",
+    "@elliemae/ds-popover": "2.4.3",
+    "@elliemae/ds-props-helpers": "2.4.3",
+    "@elliemae/ds-shared": "2.4.3",
+    "@elliemae/ds-system": "2.4.3",
+    "@elliemae/ds-tooltip": "2.4.3",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.3",
+    "@elliemae/ds-utilities": "2.4.3",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "uid": "~2.0.0"

package/types/components/styled.d.ts

@@ -1,13 +1,11 @@
 /// <reference types="react" />
-interface InputPillWrapperProps {
+export declare const StyledLabelPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledValuePillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInputPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
     value: string;
     inputWidth: number;
     inputHasFocus: boolean;
-    hasError: boolean;
-}
-export declare const StyledLabelPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledValuePillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledInputPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, InputPillWrapperProps, never>;
+}, never>;
 export declare const StyledDropdownPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledReadonlyPillWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
     hasIconRight: boolean;
@@ -20,4 +18,3 @@ export declare const StyledPillButton: import("styled-components").StyledCompone
     width: string;
     height: string;
 }, never>;
-export {};

package/types/props.d.ts

@@ -38,21 +38,12 @@ export declare const DSPillV2PropTypes: {
     inputWidth: {
         deprecated: import("react-desc").PropTypesDescValidator;
     };
-    inputId: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
     dropdownProps: {
         deprecated: import("react-desc").PropTypesDescValidator;
     };
     onDropdownClick: {
         deprecated: import("react-desc").PropTypesDescValidator;
     };
-    disabled: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    hasError: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
 };
 export declare const DSPillButtonPropTypes: {
     type: {
@@ -76,7 +67,6 @@ export declare const DSPillGroupPropTypes: {
 export declare const DSPillV2DefaultProps: {
     innerRef: () => null;
     disabled: boolean;
-    hasError: boolean;
     ariaLabel: string;
     size: string;
     labelTruncated: boolean;