@elliemae/ds-controlled-form 2.3.3-rc.0 → 2.4.0-rc.0

package/esm/text-input/exported-related/name.js

@@ -0,0 +1,3 @@
+const DSInputTextName = 'ds-input-text';
+
+export { DSInputTextName };

package/esm/text-input/exported-related/slots.js

@@ -0,0 +1,7 @@
+const DSInputTextSlots = {
+  INPUT: 'input',
+  INPUT_WRAPPER: 'input-wrapper',
+  CLEAR_BUTTON: 'input-clear-button'
+};
+
+export { DSInputTextSlots };

package/esm/text-input/exported-related/theming.js

@@ -0,0 +1,8 @@
+const DSInputTextName = 'ds-input-text';
+const DSInputTextSlots = {
+  INPUT_WRAPPER: 'root',
+  INPUT: 'input',
+  CLEAR_BUTTON: 'input-clear-button'
+};
+
+export { DSInputTextName, DSInputTextSlots };

package/esm/text-input/index.js

@@ -0,0 +1,3 @@
+export { DSInputText, DSInputTextWithSchema } from './DSInputText.js';
+export { DSInputTextDataTestIds } from './exported-related/data-test-ids.js';
+export { DSInputTextName, DSInputTextSlots } from './exported-related/theming.js';

package/esm/text-input/react-desc-prop-types.js

@@ -0,0 +1,36 @@
+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 { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';
+
+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 defaultProps = {
+  value: '',
+  onValueChange: () => null,
+  onClear: () => null,
+  placeholder: 'Hint Text',
+  disabled: false,
+  readOnly: false,
+  hasError: false,
+  innerRef: () => null,
+  inputSize: 'm',
+  clearable: false
+};
+const DSInputTextPropTypes = _objectSpread(_objectSpread(_objectSpread({}, globalAttributesPropTypes), xstyledPropTypes), {}, {
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string)]).description('Value of the input').defaultValue(''),
+  onChange: PropTypes.func.description('onChange event handler').defaultValue(() => null),
+  placeholder: PropTypes.string.description('Value of the placeholder').defaultValue(''),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Reference to the input').defaultValue(null),
+  disabled: PropTypes.bool.description('Whether the input is disabled').defaultValue(false),
+  readOnly: PropTypes.bool.description('Whether the input is readonly').defaultValue(false),
+  hasError: PropTypes.bool.description('Whether the input has error').defaultValue(false),
+  inputSize: PropTypes.oneOf(['s', 'm']).description('Size of the input').defaultValue('m'),
+  clearable: PropTypes.bool.description('Whether the input is clearable').defaultValue(false)
+});
+
+export { DSInputTextPropTypes, defaultProps };

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

@@ -0,0 +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 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: -1px;\n"])), th.color('brand-700'));
+const getBorderCss = props => {
+  if (props.isDisabled) return disabledBorderCss;
+  if (props.hasFocus) return focusBorderCss;
+  if (props.hasError) return hasErrorBorderCss;
+  if (props.isReadOnly) return readOnlyBorderCss;
+  return commonBorderCss;
+};
+const getHoverBorderCss = props => {
+  if (props.isDisabled) return disabledBorderCss;
+  if (props.hasFocus) return focusBorderCss;
+  return hoverBorderCss;
+};
+
+export { getBorderCss, getHoverBorderCss };

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

@@ -0,0 +1,28 @@
+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';
+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 => {
+  let {
+    inputSize
+  } = _ref;
+  return inputSize === 'm' ? '28px' : '24px';
+}, getBorderCss, 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'));
+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"])));
+
+export { StyledClearButton, StyledInput, StyledInputWrapper };

package/esm/{controlled-toggle → toggle}/styles.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { containerHeight, borderRadius, margin, labelHeight, handleBorderColor, handleBackgroundColor, handleCursors, circleValues, handleFontSize } from './utils/styleHelpers.js';
 
 const StyledContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-v733m4-0"
+  componentId: "sc-yhh3ee-0"
 })(["display:inline-flex;width:fit-content;justify-content:center;align-items:center;height:", ";border-radius:", ";outline:none;position:relative;border:2px solid transparent;&:hover,&:focus-within{border:2px solid ", ";&:after{content:'';height:calc(100% + 4px);width:calc(100% + 4px);border:1px solid ", ";border-radius:20px;position:absolute;}}"], _ref => {
   let {
     size
@@ -25,7 +25,7 @@ const StyledContainer = /*#__PURE__*/styled.div.withConfig({
   return theme.colors.brand[600];
 });
 const StyledLabel = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-v733m4-1"
+  componentId: "sc-yhh3ee-1"
 })(["width:", ";height:", ";z-index:2;outline:none;border-radius:", ";"], _ref5 => {
   let {
     width,
@@ -44,7 +44,7 @@ const StyledLabel = /*#__PURE__*/styled.div.withConfig({
   return labelHeight[size];
 });
 const StyledVisibleContent = /*#__PURE__*/styled.label.withConfig({
-  componentId: "sc-v733m4-2"
+  componentId: "sc-yhh3ee-2"
 })(["display:flex;margin:0;padding:0;align-items:center;height:100%;flex-direction:", ";border-radius:", ";border:", ";transition:background-color 0.2s;background-color:", ";&:hover{cursor:", ";}"], _ref8 => {
   let {
     checked
@@ -82,7 +82,7 @@ const StyledVisibleContent = /*#__PURE__*/styled.label.withConfig({
   return handleCursors(disabled, readOnly);
 });
 const StyledCircle = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-v733m4-3"
+  componentId: "sc-yhh3ee-3"
 })(["height:", ";width:", ";border-radius:50%;background-color:", ";"], _ref13 => {
   let {
     size
@@ -101,7 +101,7 @@ const StyledCircle = /*#__PURE__*/styled.div.withConfig({
   return readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'];
 });
 const StyledText = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-v733m4-4"
+  componentId: "sc-yhh3ee-4"
 })(["display:flex;flex-grow:1;line-height:1;margin-bottom:-0.12rem;align-items:center;justify-content:", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], _ref16 => {
   let {
     isLongerTextRendering
@@ -138,10 +138,10 @@ const StyledText = /*#__PURE__*/styled.div.withConfig({
   return isLongerTextRendering && !checked ? "margin-left: 4px;" : undefined;
 });
 const StyledInput = /*#__PURE__*/styled.input.withConfig({
-  componentId: "sc-v733m4-5"
+  componentId: "sc-yhh3ee-5"
 })(["position:absolute;opacity:0;z-index:20;height:100%;width:100%;cursor:pointer;"]);
 const SetLabelWidth = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-v733m4-6"
+  componentId: "sc-yhh3ee-6"
 })(["font-size:", ";font-weight:", ";width:auto;position:absolute;white-space:nowrap;visibility:hidden;"], _ref22 => {
   let {
     theme,