@elliemae/ds-controlled-form 2.4.3-rc.6 → 2.4.3

package/cjs/checkbox/ControlledCheckbox.js

@@ -86,7 +86,7 @@ const DSControlledCheckbox = props => {
       "aria-controls": ariaControls || legacyAriaControls,
       disabled: disabled,
       readOnly: readOnly,
-      onClick: !disabled && onChange,
+      onClick: onChange,
       "aria-checked": checked
     }, restGlobals), {}, {
       tabIndex: 0
@@ -101,20 +101,15 @@ const DSControlledCheckbox = props => {
       disabled: disabled,
       readOnly: readOnly,
       onChange: onChange
-    }, restGlobals))), label && /*#__PURE__*/jsxRuntime.jsx(styles.StyledLabel, _objectSpread(_objectSpread({
+    }, restGlobals))), label && /*#__PURE__*/_jsx__default["default"](styles.StyledLabel, {
       htmlFor: id,
       disabled: disabled,
       readOnly: readOnly,
       checked: checked,
-      disabled: disabled,
       "data-testid": "ds-checkbox-label",
       wrapLabel: wrapLabel
-    }, !disabled && (ariaControls || legacyAriaControls) ? {
-      onClick: onChange
-    } : {}), {}, {
-      children: wrapLabel ? /*#__PURE__*/_jsx__default["default"](styles.StyledWrapLabel, {}, void 0, label) : /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
-        value: label
-      })
+    }, void 0, wrapLabel ? /*#__PURE__*/_jsx__default["default"](styles.StyledWrapLabel, {}, void 0, label) : /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+      value: label
     }))]
   }));
 };

package/cjs/checkbox/styles.js

@@ -105,6 +105,9 @@ const checkboxStyles = dsSystem.css`
   &:hover {
     cursor: pointer;
   }
+  &:disabled {
+    cursor: not-allowed;
+  }
   width: 100%;
   height: 100%;
   position: absolute;
@@ -117,58 +120,40 @@ const StyledInput = dsSystem.styled('input', {
   slot: theming.DSCheckboxSlots.INPUT
 })`
   ${checkboxStyles}
-  &:disabled {
-    cursor: not-allowed;
-  }
 `;
 const StyledInputMixed = dsSystem.styled('div', {
   name: theming.DSCheckboxName,
   slot: theming.DSCheckboxSlots.INPUT
 })`
   ${checkboxStyles}
-  ${_ref11 => {
-  let {
-    disabled
-  } = _ref11;
-  return disabled ? `&:hover {
-    cursor: not-allowed;
-  }` : '';
-}}
 `;
 const StyledLabel = dsSystem.styled('label', {
   name: theming.DSCheckboxName,
   slot: theming.DSCheckboxSlots.LABEL
 })`
-  ${_ref12 => {
+  &:hover {
+    cursor: pointer;
+  }
+  ${_ref11 => {
   let {
     wrapLabel,
     theme
-  } = _ref12;
+  } = _ref11;
   return wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`;
 }};
 
-  color: ${_ref13 => {
+  color: ${_ref12 => {
   let {
     theme,
     disabled,
-    readOnly
-  } = _ref13;
-  return disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
+    readOnly,
+    checked
+  } = _ref12;
+  return disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
 }};
   font-size: 13px;
   line-height: 13px;
   display: inherit;
-
-  ${_ref14 => {
-  let {
-    disabled
-  } = _ref14;
-  return disabled ? `&:hover {
-    cursor: not-allowed;
-  }` : `&:hover {
-    cursor: pointer;
-  }`;
-}}
 `;
 const StyledWrapLabel = dsSystem.styled('span')``;
 

package/cjs/combobox/parts/controls-input/ControlsInput.js

@@ -44,7 +44,7 @@ const ControlsInput = () => {
   return /*#__PURE__*/_jsx__default["default"](styled.StyledInputWrapper, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledInputWidthReference, {
     ref: spanReference,
     children: spanReferenceText
-  }), showPlaceholder && /*#__PURE__*/_jsx__default["default"](styled.StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+  }), /*#__PURE__*/_jsx__default["default"](styled.StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
     value: showPlaceholder
   })), /*#__PURE__*/jsxRuntime.jsx(styled.StyledInput, {
     "data-testid": ComboboxDataTestids.ComboboxDataTestid.INPUT,

package/cjs/combobox/parts/controls-input/styled.js

@@ -12,9 +12,7 @@ const StyledInput = dsSystem.styled('input', {
   font-size: 13px;
   line-height: 13px;
   border: none;
-  overflow: hidden;
   padding: 0;
-  z-index: 2;
   outline: none;
   color: ${props => props.theme.colors.neutral[700]};
   &:focus {
@@ -43,20 +41,17 @@ const StyledInputPlaceHolder = dsSystem.styled.div`
   & span::after {
     content: '';
     padding: 1px;
-    // solve italic font style clipping issue with overflow hidden.
   }
 `;
 const StyledInputWidthReference = dsSystem.styled.span`
   visibility: hidden;
   position: absolute;
   top: -9999px;
-  z-index: 1;
 `;
 const StyledInputWrapper = dsSystem.styled('div')`
   position: relative;
   align-items: center;
   display: flex;
-  padding-right: 1px;
 `;
 
 exports.StyledInput = StyledInput;

package/cjs/combobox/parts/controls-input/useControlsInput.js

@@ -17,6 +17,7 @@ const useControlsInput = () => {
     },
     setHasFocus,
     inputValue,
+    setMenuState,
     setInputValue
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const [width, setWidth] = React.useState(1); // use span reference to calculate the real width for the input
@@ -25,11 +26,7 @@ const useControlsInput = () => {
   const showPlaceholder = !inputValue && listHelper.isSelectedValueEmpty(selectedValues) ? placeholder : null;
   const spanReferenceText = inputValue.replace(/\s/g, '\u00a0');
   React.useEffect(() => {
-    if (spanReference.current) {
-      spanReference.current.style.display = 'block';
-      setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
-      spanReference.current.style.display = 'none';
-    }
+    setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
   }, [inputValue]); // if we se an input mask we configure inside here the proper mask
   // or a stardard combobox onchange event
 

package/cjs/combobox/parts/controls-input/useKeyboardNavigation.js

@@ -158,6 +158,8 @@ const useKeyboardNavigation = () => {
       if (!e.currentTarget.value && lastValue) {
         onChange(listHelper.getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
       }
+
+      if (onFilter) onFilter(allOptions, inputValue);
     }
 
     if (e.key === 'Tab' && !inline && menuState) {

package/cjs/combobox/utils/listHelper.js

@@ -72,10 +72,7 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
 
   return selectedOption;
 };
-const filterOptions = (inputValue, options) => {
-  if (inputValue === '') return options;
-  return options.filter(option => option.type === constants.MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
-};
+const filterOptions = (inputValue, options) => options.filter(option => option.type === constants.MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
 const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
   const items = [];
   if (optionsToParse) optionsToParse.forEach(option => {

package/esm/checkbox/ControlledCheckbox.js

@@ -76,7 +76,7 @@ const DSControlledCheckbox = props => {
       "aria-controls": ariaControls || legacyAriaControls,
       disabled: disabled,
       readOnly: readOnly,
-      onClick: !disabled && onChange,
+      onClick: onChange,
       "aria-checked": checked
     }, restGlobals), {}, {
       tabIndex: 0
@@ -91,20 +91,15 @@ const DSControlledCheckbox = props => {
       disabled: disabled,
       readOnly: readOnly,
       onChange: onChange
-    }, restGlobals))), label && /*#__PURE__*/jsx(StyledLabel, _objectSpread(_objectSpread({
+    }, restGlobals))), label && /*#__PURE__*/_jsx(StyledLabel, {
       htmlFor: id,
       disabled: disabled,
       readOnly: readOnly,
       checked: checked,
-      disabled: disabled,
       "data-testid": "ds-checkbox-label",
       wrapLabel: wrapLabel
-    }, !disabled && (ariaControls || legacyAriaControls) ? {
-      onClick: onChange
-    } : {}), {}, {
-      children: wrapLabel ? /*#__PURE__*/_jsx(StyledWrapLabel, {}, void 0, label) : /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-        value: label
-      })
+    }, void 0, wrapLabel ? /*#__PURE__*/_jsx(StyledWrapLabel, {}, void 0, label) : /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+      value: label
     }))]
   }));
 };

package/esm/checkbox/styles.js

@@ -101,6 +101,9 @@ const checkboxStyles = css`
   &:hover {
     cursor: pointer;
   }
+  &:disabled {
+    cursor: not-allowed;
+  }
   width: 100%;
   height: 100%;
   position: absolute;
@@ -113,58 +116,40 @@ const StyledInput = styled('input', {
   slot: DSCheckboxSlots.INPUT
 })`
   ${checkboxStyles}
-  &:disabled {
-    cursor: not-allowed;
-  }
 `;
 const StyledInputMixed = styled('div', {
   name: DSCheckboxName,
   slot: DSCheckboxSlots.INPUT
 })`
   ${checkboxStyles}
-  ${_ref11 => {
-  let {
-    disabled
-  } = _ref11;
-  return disabled ? `&:hover {
-    cursor: not-allowed;
-  }` : '';
-}}
 `;
 const StyledLabel = styled('label', {
   name: DSCheckboxName,
   slot: DSCheckboxSlots.LABEL
 })`
-  ${_ref12 => {
+  &:hover {
+    cursor: pointer;
+  }
+  ${_ref11 => {
   let {
     wrapLabel,
     theme
-  } = _ref12;
+  } = _ref11;
   return wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`;
 }};
 
-  color: ${_ref13 => {
+  color: ${_ref12 => {
   let {
     theme,
     disabled,
-    readOnly
-  } = _ref13;
-  return disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
+    readOnly,
+    checked
+  } = _ref12;
+  return disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
 }};
   font-size: 13px;
   line-height: 13px;
   display: inherit;
-
-  ${_ref14 => {
-  let {
-    disabled
-  } = _ref14;
-  return disabled ? `&:hover {
-    cursor: not-allowed;
-  }` : `&:hover {
-    cursor: pointer;
-  }`;
-}}
 `;
 const StyledWrapLabel = styled('span')``;
 

package/esm/combobox/parts/controls-input/ControlsInput.js

@@ -36,7 +36,7 @@ const ControlsInput = () => {
   return /*#__PURE__*/_jsx(StyledInputWrapper, {}, void 0, /*#__PURE__*/jsx(StyledInputWidthReference, {
     ref: spanReference,
     children: spanReferenceText
-  }), showPlaceholder && /*#__PURE__*/_jsx(StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+  }), /*#__PURE__*/_jsx(StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
     value: showPlaceholder
   })), /*#__PURE__*/jsx(StyledInput, {
     "data-testid": ComboboxDataTestid.INPUT,

package/esm/combobox/parts/controls-input/styled.js

@@ -8,9 +8,7 @@ const StyledInput = styled('input', {
   font-size: 13px;
   line-height: 13px;
   border: none;
-  overflow: hidden;
   padding: 0;
-  z-index: 2;
   outline: none;
   color: ${props => props.theme.colors.neutral[700]};
   &:focus {
@@ -39,20 +37,17 @@ const StyledInputPlaceHolder = styled.div`
   & span::after {
     content: '';
     padding: 1px;
-    // solve italic font style clipping issue with overflow hidden.
   }
 `;
 const StyledInputWidthReference = styled.span`
   visibility: hidden;
   position: absolute;
   top: -9999px;
-  z-index: 1;
 `;
 const StyledInputWrapper = styled('div')`
   position: relative;
   align-items: center;
   display: flex;
-  padding-right: 1px;
 `;
 
 export { StyledInput, StyledInputPlaceHolder, StyledInputWidthReference, StyledInputWrapper };

package/esm/combobox/parts/controls-input/useControlsInput.js

@@ -13,6 +13,7 @@ const useControlsInput = () => {
     },
     setHasFocus,
     inputValue,
+    setMenuState,
     setInputValue
   } = useContext(ComboBoxContext);
   const [width, setWidth] = useState(1); // use span reference to calculate the real width for the input
@@ -21,11 +22,7 @@ const useControlsInput = () => {
   const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;
   const spanReferenceText = inputValue.replace(/\s/g, '\u00a0');
   useEffect(() => {
-    if (spanReference.current) {
-      spanReference.current.style.display = 'block';
-      setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
-      spanReference.current.style.display = 'none';
-    }
+    setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
   }, [inputValue]); // if we se an input mask we configure inside here the proper mask
   // or a stardard combobox onchange event
 

package/esm/combobox/parts/controls-input/useKeyboardNavigation.js

@@ -154,6 +154,8 @@ const useKeyboardNavigation = () => {
       if (!e.currentTarget.value && lastValue) {
         onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
       }
+
+      if (onFilter) onFilter(allOptions, inputValue);
     }
 
     if (e.key === 'Tab' && !inline && menuState) {

package/esm/combobox/utils/listHelper.js

@@ -68,10 +68,7 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
 
   return selectedOption;
 };
-const filterOptions = (inputValue, options) => {
-  if (inputValue === '') return options;
-  return options.filter(option => option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
-};
+const filterOptions = (inputValue, options) => options.filter(option => option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
 const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
   const items = [];
   if (optionsToParse) optionsToParse.forEach(option => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-controlled-form",
-  "version": "2.4.3-rc.6",
+  "version": "2.4.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Controllers",
   "module": "./esm/index.js",
@@ -896,20 +896,20 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.4.3-rc.6",
-    "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.6",
-    "@elliemae/ds-controlled-form": "2.4.3-rc.6",
-    "@elliemae/ds-form": "2.4.3-rc.6",
-    "@elliemae/ds-form-layout-blocks": "2.4.3-rc.6",
-    "@elliemae/ds-grid": "2.4.3-rc.6",
-    "@elliemae/ds-icon": "2.4.3-rc.6",
-    "@elliemae/ds-icons": "2.4.3-rc.6",
-    "@elliemae/ds-pills": "2.4.3-rc.6",
-    "@elliemae/ds-popperjs": "2.4.3-rc.6",
-    "@elliemae/ds-props-helpers": "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-button": "2.4.3",
+    "@elliemae/ds-circular-progress-indicator": "2.4.3",
+    "@elliemae/ds-controlled-form": "2.4.3",
+    "@elliemae/ds-form": "2.4.3",
+    "@elliemae/ds-form-layout-blocks": "2.4.3",
+    "@elliemae/ds-grid": "2.4.3",
+    "@elliemae/ds-icon": "2.4.3",
+    "@elliemae/ds-icons": "2.4.3",
+    "@elliemae/ds-pills": "2.4.3",
+    "@elliemae/ds-popperjs": "2.4.3",
+    "@elliemae/ds-props-helpers": "2.4.3",
+    "@elliemae/ds-system": "2.4.3",
+    "@elliemae/ds-tooltip": "2.4.3",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.3",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5",

package/types/checkbox/react-desc-prop-types.d.ts

@@ -6,7 +6,6 @@ export declare namespace DSControlledCheckboxT {
         tabIndex?: number;
         hasError?: boolean;
         wrapLabel: boolean;
-        disabled: boolean;
     }
     interface OptionalProps {
         innerRef: React.RefObject<HTMLInputElement> | React.LegacyRef<HTMLInputElement>;

package/types/combobox/react-desc-prop-types.d.ts

@@ -36,6 +36,7 @@ export declare namespace DSComboboxT {
         onCreate?: (label: string) => void;
         onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;
         onCancel?: () => void;
+        onBlur?: () => void;
         onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;
         onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;
     }