@elliemae/ds-pills 2.4.2 → 2.4.3-rc.10

package/cjs/components/styled.js

@@ -13,9 +13,10 @@ 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;
@@ -103,10 +104,11 @@ 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 {
-    value,
-    theme
+    theme,
+    hasError
   } = _ref6;
-  return borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500]);
+  if (hasError) return borderOutside(theme.colors.danger[900]);
+  return borderOutside(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,11 +24,13 @@ const InputPill = /*#__PURE__*/React__default["default"].memo(_ref => {
     inputRender,
     onInputChange,
     onInputClear,
-    innerRef
+    innerRef,
+    hasError,
+    inputId
   } = _ref;
   const ref = React.useRef(null);
   const InputComponent = React.useMemo(() => inputRender, [inputRender]);
-  const pillUid = React.useMemo(() => `ds-pill-${uid.uid()}`, []);
+  const pillUid = React.useMemo(() => inputId ?? `ds-pill-${uid.uid()}`, []);
   const onCloseIconClick = React.useCallback(e => {
     if ([undefined, 'Enter', 'Space'].includes(e.code)) {
       e.preventDefault();
@@ -44,7 +46,8 @@ const InputPill = /*#__PURE__*/React__default["default"].memo(_ref => {
     cols: label === '' ? ['auto'] : ['auto', '24px'],
     inputWidth: inputWidth,
     value: label,
-    inputHasFocus: inputHasFocus
+    inputHasFocus: inputHasFocus,
+    hasError: hasError
   }, void 0, /*#__PURE__*/_jsx__default["default"](InputComponent, {
     id: pillUid,
     className: "ds-pill-focus-point",

package/cjs/props.js

@@ -22,8 +22,11 @@ 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)
+  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)
 };
 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'),
@@ -37,6 +40,7 @@ const DSPillGroupPropTypes = {
 const DSPillV2DefaultProps = {
   innerRef: () => null,
   disabled: false,
+  hasError: false,
   ariaLabel: '',
   size: 'm',
   labelTruncated: true,

package/esm/components/styled.js

@@ -4,9 +4,10 @@ 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;
@@ -94,10 +95,11 @@ 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 {
-    value,
-    theme
+    theme,
+    hasError
   } = _ref6;
-  return borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500]);
+  if (hasError) return borderOutside(theme.colors.danger[900]);
+  return borderOutside(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,11 +15,13 @@ const InputPill = /*#__PURE__*/React.memo(_ref => {
     inputRender,
     onInputChange,
     onInputClear,
-    innerRef
+    innerRef,
+    hasError,
+    inputId
   } = _ref;
   const ref = useRef(null);
   const InputComponent = useMemo(() => inputRender, [inputRender]);
-  const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
+  const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, []);
   const onCloseIconClick = useCallback(e => {
     if ([undefined, 'Enter', 'Space'].includes(e.code)) {
       e.preventDefault();
@@ -35,7 +37,8 @@ const InputPill = /*#__PURE__*/React.memo(_ref => {
     cols: label === '' ? ['auto'] : ['auto', '24px'],
     inputWidth: inputWidth,
     value: label,
-    inputHasFocus: inputHasFocus
+    inputHasFocus: inputHasFocus,
+    hasError: hasError
   }, void 0, /*#__PURE__*/_jsx(InputComponent, {
     id: pillUid,
     className: "ds-pill-focus-point",

package/esm/props.js

@@ -18,8 +18,11 @@ 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)
+  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)
 };
 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'),
@@ -33,6 +36,7 @@ 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.2",
+  "version": "2.4.3-rc.10",
   "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.2",
-    "@elliemae/ds-classnames": "2.4.2",
-    "@elliemae/ds-dropdownmenu": "2.4.2",
-    "@elliemae/ds-form": "2.4.2",
-    "@elliemae/ds-grid": "2.4.2",
-    "@elliemae/ds-icons": "2.4.2",
-    "@elliemae/ds-modal": "2.4.2",
-    "@elliemae/ds-popover": "2.4.2",
-    "@elliemae/ds-props-helpers": "2.4.2",
-    "@elliemae/ds-shared": "2.4.2",
-    "@elliemae/ds-system": "2.4.2",
-    "@elliemae/ds-tooltip": "2.4.2",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.2",
-    "@elliemae/ds-utilities": "2.4.2",
+    "@elliemae/ds-button": "2.4.3-rc.10",
+    "@elliemae/ds-classnames": "2.4.3-rc.10",
+    "@elliemae/ds-dropdownmenu": "2.4.3-rc.10",
+    "@elliemae/ds-form": "2.4.3-rc.10",
+    "@elliemae/ds-grid": "2.4.3-rc.10",
+    "@elliemae/ds-icons": "2.4.3-rc.10",
+    "@elliemae/ds-modal": "2.4.3-rc.10",
+    "@elliemae/ds-popover": "2.4.3-rc.10",
+    "@elliemae/ds-props-helpers": "2.4.3-rc.10",
+    "@elliemae/ds-shared": "2.4.3-rc.10",
+    "@elliemae/ds-system": "2.4.3-rc.10",
+    "@elliemae/ds-tooltip": "2.4.3-rc.10",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.10",
+    "@elliemae/ds-utilities": "2.4.3-rc.10",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "uid": "~2.0.0"

package/types/components/styled.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
-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, {
+interface InputPillWrapperProps {
     value: string;
     inputWidth: number;
     inputHasFocus: boolean;
-}, never>;
+    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>;
 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;
@@ -18,3 +20,4 @@ export declare const StyledPillButton: import("styled-components").StyledCompone
     width: string;
     height: string;
 }, never>;
+export {};

package/types/props.d.ts

@@ -38,12 +38,21 @@ 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: {
@@ -67,6 +76,7 @@ export declare const DSPillGroupPropTypes: {
 export declare const DSPillV2DefaultProps: {
     innerRef: () => null;
     disabled: boolean;
+    hasError: boolean;
     ariaLabel: string;
     size: string;
     labelTruncated: boolean;