@elliemae/ds-controlled-form 2.4.2-rc.12 → 2.4.2-rc.15

package/esm/text-input/styled/borders.js

@@ -1,13 +1,24 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { css, th } from '@elliemae/ds-system';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const commonBorderCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), th.color('neutral-400'));
-const readOnlyBorderCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  border-top-color: ", ";\n"])), th.color('neutral-400'));
+const commonBorderCss = css`
+  border: 1px solid ${th.color('neutral-400')};
+`;
+const readOnlyBorderCss = css`
+  border: 1px solid transparent;
+  border-top-color: ${th.color('neutral-400')};
+`;
 const disabledBorderCss = commonBorderCss;
-const hasErrorBorderCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), th.color('danger-900'));
-const hoverBorderCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), th.color('brand-700'));
-const focusBorderCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  outline: 2px solid ", ";\n  outline-offset: -2px;\n"])), th.color('brand-700'));
+const hasErrorBorderCss = css`
+  border: 1px solid ${th.color('danger-900')};
+`;
+const hoverBorderCss = css`
+  border: 1px solid ${th.color('brand-700')};
+`;
+const focusBorderCss = css`
+  border: 1px solid transparent;
+  outline: 2px solid ${th.color('brand-700')};
+  outline-offset: -2px;
+`;
 const getBorderCss = props => {
   if (props.isDisabled) return disabledBorderCss;
   if (props.hasFocus) return focusBorderCss;

package/esm/text-input/styled/components.js

@@ -1,4 +1,3 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { DSButtonV2 } from '@elliemae/ds-button';
 import { Grid } from '@elliemae/ds-grid';
 import { styled, th } from '@elliemae/ds-system';
@@ -6,23 +5,67 @@ import { layout, space, sizing } from '@xstyled/styled-components';
 import { DSInputTextName, DSInputTextSlots } from '../exported-related/theming.js';
 import { getBorderCss, getHoverBorderCss } from './borders.js';
 
-var _templateObject, _templateObject2, _templateObject3;
 const StyledInputWrapper = styled(Grid, {
   name: DSInputTextName,
   slot: DSInputTextSlots.INPUT_WRAPPER
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", ";\n\n  ", "\n  border-radius: 2px;\n\n  :hover {\n    ", "\n  }\n\n  ", "\n  ", "\n  ", "\n"])), _ref => {
+})`
+  height: ${_ref => {
   let {
     inputSize
   } = _ref;
   return inputSize === 'm' ? '28px' : '24px';
-}, getBorderCss, getHoverBorderCss, layout, space, sizing);
+}};
+
+  ${getBorderCss}
+  border-radius: 2px;
+
+  :hover {
+    ${getHoverBorderCss}
+  }
+
+  ${layout}
+  ${space}
+  ${sizing}
+`;
 const StyledInput = styled('input', {
   name: DSInputTextName,
   slot: DSInputTextSlots.INPUT
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 0 ", ";\n  border: none;\n  outline: none;\n  border-radius: 2px;\n\n  width: 100%;\n  height: 100%;\n  font-size: 13px;\n\n  ::placeholder {\n    font-weight: ", ";\n    font-style: italic;\n    color: ", ";\n  }\n\n  :disabled {\n    background-color: ", ";\n    color: #616b7f;\n    cursor: not-allowed;\n  }\n"])), th.space('xxs'), th.fontWeight('regular'), th.color('neutral-500'), th.color('neutral-080'));
+})`
+  padding: 0 ${th.space('xxs')};
+  border: none;
+  outline: none;
+  border-radius: 2px;
+
+  width: 100%;
+  height: 100%;
+  font-size: 13px;
+
+  ::placeholder {
+    font-weight: ${th.fontWeight('regular')};
+    font-style: italic;
+    color: ${th.color('neutral-500')};
+  }
+
+  :disabled {
+    background-color: ${th.color('neutral-080')};
+    color: #616b7f;
+    cursor: not-allowed;
+  }
+`;
 const StyledClearButton = styled(DSButtonV2, {
   name: DSInputTextName,
   slot: DSInputTextSlots.CLEAR_BUTTON
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 100%;\n  min-width: 20px;\n  width: 20px;\n  &:after {\n    border-top-left-radius: 0px !important;\n    border-bottom-left-radius: 0px !important;\n  }\n  :focus {\n    border-width: 0px;\n  }\n"])));
+})`
+  height: 100%;
+  min-width: 20px;
+  width: 20px;
+  &:after {
+    border-top-left-radius: 0px !important;
+    border-bottom-left-radius: 0px !important;
+  }
+  :focus {
+    border-width: 0px;
+  }
+`;
 
 export { StyledClearButton, StyledInput, StyledInputWrapper };

package/esm/toggle/ControlledToggle.js

@@ -5,7 +5,6 @@ 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 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import { uid } from 'uid';
 import { describe } from 'react-desc';

package/esm/toggle/styles.js

@@ -31,7 +31,7 @@ const StyledLabel = /*#__PURE__*/styled.div.withConfig({
     width,
     size
   } = _ref5;
-  return "calc(".concat(width, "px + ").concat(margin[size], ")");
+  return `calc(${width}px + ${margin[size]})`;
 }, _ref6 => {
   let {
     size
@@ -54,7 +54,7 @@ const StyledVisibleContent = /*#__PURE__*/styled.label.withConfig({
   let {
     size
   } = _ref9;
-  return "calc(".concat(labelHeight[size], " - 4px)");
+  return `calc(${labelHeight[size]} - 4px)`;
 }, _ref10 => {
   let {
     theme,
@@ -64,7 +64,9 @@ const StyledVisibleContent = /*#__PURE__*/styled.label.withConfig({
     readOnly,
     active
   } = _ref10;
-  return size === 's' ? "1px solid ".concat(handleBorderColor(checked, disabled, readOnly, active, theme)) : "\n    2px solid ".concat(handleBorderColor(checked, disabled, readOnly, active, theme), "\n    ");
+  return size === 's' ? `1px solid ${handleBorderColor(checked, disabled, readOnly, active, theme)}` : `
+    2px solid ${handleBorderColor(checked, disabled, readOnly, active, theme)}
+    `;
 }, _ref11 => {
   let {
     theme,
@@ -129,13 +131,13 @@ const StyledText = /*#__PURE__*/styled.div.withConfig({
     isLongerTextRendering,
     checked
   } = _ref20;
-  return isLongerTextRendering && checked ? "margin-left: 6px;" : undefined;
+  return isLongerTextRendering && checked ? `margin-left: 6px;` : undefined;
 }, _ref21 => {
   let {
     isLongerTextRendering,
     checked
   } = _ref21;
-  return isLongerTextRendering && !checked ? "margin-left: 4px;" : undefined;
+  return isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined;
 });
 const StyledInput = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-yhh3ee-5"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-controlled-form",
-  "version": "2.4.2-rc.12",
+  "version": "2.4.2-rc.15",
   "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.2-rc.12",
-    "@elliemae/ds-circular-progress-indicator": "2.4.2-rc.12",
-    "@elliemae/ds-controlled-form": "2.4.2-rc.12",
-    "@elliemae/ds-form": "2.4.2-rc.12",
-    "@elliemae/ds-form-layout-blocks": "2.4.2-rc.12",
-    "@elliemae/ds-grid": "2.4.2-rc.12",
-    "@elliemae/ds-icon": "2.4.2-rc.12",
-    "@elliemae/ds-icons": "2.4.2-rc.12",
-    "@elliemae/ds-pills": "2.4.2-rc.12",
-    "@elliemae/ds-popperjs": "2.4.2-rc.12",
-    "@elliemae/ds-props-helpers": "2.4.2-rc.12",
-    "@elliemae/ds-system": "2.4.2-rc.12",
-    "@elliemae/ds-tooltip": "2.4.2-rc.12",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.12",
+    "@elliemae/ds-button": "2.4.2-rc.15",
+    "@elliemae/ds-circular-progress-indicator": "2.4.2-rc.15",
+    "@elliemae/ds-controlled-form": "2.4.2-rc.15",
+    "@elliemae/ds-form": "2.4.2-rc.15",
+    "@elliemae/ds-form-layout-blocks": "2.4.2-rc.15",
+    "@elliemae/ds-grid": "2.4.2-rc.15",
+    "@elliemae/ds-icon": "2.4.2-rc.15",
+    "@elliemae/ds-icons": "2.4.2-rc.15",
+    "@elliemae/ds-pills": "2.4.2-rc.15",
+    "@elliemae/ds-popperjs": "2.4.2-rc.15",
+    "@elliemae/ds-props-helpers": "2.4.2-rc.15",
+    "@elliemae/ds-system": "2.4.2-rc.15",
+    "@elliemae/ds-tooltip": "2.4.2-rc.15",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.15",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5",

package/types/text-input/config/useInputText.d.ts

@@ -53,7 +53,7 @@ export declare const useInputText: (props: DSInputTextT.Props) => {
         tabIndex: number;
         translate: "yes" | "no";
         radioGroup: string;
-        role: "separator" | "option" | (string & {}) | "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "table" | "switch" | "search" | "alert" | "alertdialog" | "application" | "banner" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "grid" | "gridcell" | "group" | "heading" | "list" | "listbox" | "listitem" | "log" | "marquee" | "math" | "menubar" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "searchbox" | "slider" | "spinbutton" | "status" | "tab" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem";
+        role: "separator" | "option" | (string & {}) | "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "table" | "switch" | "alert" | "alertdialog" | "application" | "banner" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "grid" | "gridcell" | "group" | "heading" | "list" | "listbox" | "listitem" | "log" | "marquee" | "math" | "menubar" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "slider" | "spinbutton" | "status" | "tab" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem";
         about: string;
         datatype: string;
         inlist: any;
@@ -74,7 +74,7 @@ export declare const useInputText: (props: DSInputTextT.Props) => {
         results: number;
         security: string;
         unselectable: "on" | "off";
-        inputMode: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
+        inputMode: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal";
         is: string;
         'aria-activedescendant': string;
         'aria-atomic': boolean | "true" | "false";
@@ -420,7 +420,7 @@ export declare const useInputText: (props: DSInputTextT.Props) => {
         overflow: (string & {}) | "hidden" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "auto" | "scroll" | "-moz-hidden-unscrollable" | "clip" | "visible" | import("@xstyled/system").ThemeProp<import("csstype").Property.Overflow, import("@xstyled/system").Theme>;
         overflowX: "hidden" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "auto" | "scroll" | "-moz-hidden-unscrollable" | "clip" | "visible" | import("@xstyled/system").ThemeProp<import("csstype").Property.OverflowX, import("@xstyled/system").Theme>;
         overflowY: "hidden" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "auto" | "scroll" | "-moz-hidden-unscrollable" | "clip" | "visible" | import("@xstyled/system").ThemeProp<import("csstype").Property.OverflowY, import("@xstyled/system").Theme>;
-        position: "fixed" | "inherit" | "absolute" | "-moz-initial" | "initial" | "revert" | "unset" | "-webkit-sticky" | "relative" | "static" | "sticky" | import("@xstyled/system").ThemeProp<import("csstype").Property.Position, import("@xstyled/system").Theme>;
+        position: "inherit" | "absolute" | "-moz-initial" | "initial" | "revert" | "unset" | "fixed" | "-webkit-sticky" | "relative" | "static" | "sticky" | import("@xstyled/system").ThemeProp<import("csstype").Property.Position, import("@xstyled/system").Theme>;
         zIndex: string | (string & {}) | (number & {}) | import("@xstyled/system").ThemeProp<string | (string & {}) | (number & {}), import("@xstyled/system").Theme>;
         top: string | 0 | (string & {}) | import("@xstyled/system").ThemeProp<string | 0 | (string & {}), import("@xstyled/system").Theme>;
         right: string | 0 | (string & {}) | import("@xstyled/system").ThemeProp<string | 0 | (string & {}), import("@xstyled/system").Theme>;