@elliemae/ds-controlled-form 2.3.0-alpha.9 → 2.3.0-next.3

package/esm/controlled-toggle/ControlledToggle.js

@@ -0,0 +1,119 @@
+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 _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';
+import { propTypes } from './propTypes.js';
+import { StyledContainer, StyledInput, StyledLabel, StyledVisibleContent, StyledCircle, StyledText, SetLabelWidth } from './styles.js';
+import { defaultProps } from './defaultProps.js';
+import { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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 DSControlledToggle = _ref => {
+  let {
+    labelOn,
+    labelOff,
+    name,
+    value,
+    checked,
+    onChange,
+    size,
+    readOnly,
+    active,
+    disabled,
+    containerProps,
+    id
+  } = _ref;
+  const [isLongerTextRendering, setIsLongerTextRendering] = useState(false);
+  const [width, setWidth] = useState(0);
+  const labelTextRef = useRef(null);
+  const widthTextRef = useRef(null);
+  const longerText = useMemo(() => labelOn.length > labelOff.length ? labelOn : labelOff, [labelOff, labelOn]);
+  const instanceUID = useMemo(() => uid(5), []);
+  useEffect(() => {
+    if (labelTextRef.current) {
+      setIsLongerTextRendering(labelTextRef.current.innerText === longerText);
+    }
+  }, [labelTextRef, longerText, checked]);
+  useEffect(() => {
+    if (widthTextRef.current) {
+      setWidth(widthTextRef.current.clientWidth);
+    }
+  }, [widthTextRef]);
+  const handleOnChange = useCallback(() => {
+    if (disabled || readOnly) return;
+    onChange();
+  }, [disabled, readOnly, onChange]);
+  const handleKeyDown = useCallback(e => {
+    if (disabled || readOnly) {
+      e.preventDefault();
+    }
+
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      onChange();
+    }
+  }, [disabled, onChange, readOnly]);
+  return addTooltipOnReadOnly( /*#__PURE__*/jsxs(StyledContainer, _objectSpread(_objectSpread({
+    size: size,
+    "data-testid": "ds-controlled-toggle"
+  }, containerProps), {}, {
+    children: [/*#__PURE__*/_jsx(StyledInput, {
+      type: "checkbox",
+      name: name,
+      value: value,
+      checked: checked,
+      "data-testid": "ds-controlled-toggle-checkbox",
+      id: id || instanceUID,
+      "aria-disabled": disabled,
+      "aria-checked": checked,
+      tabIndex: 0,
+      onChange: handleOnChange,
+      onKeyDown: handleKeyDown
+    }), /*#__PURE__*/_jsx(StyledLabel, {
+      checked: checked,
+      size: size,
+      width: width
+    }, void 0, /*#__PURE__*/_jsx(StyledVisibleContent, {
+      checked: checked,
+      size: size,
+      readOnly: readOnly,
+      active: active,
+      disabled: disabled,
+      htmlFor: id ? undefined : instanceUID,
+      as: id ? 'p' : 'label'
+    }, void 0, /*#__PURE__*/_jsx(StyledCircle, {
+      checked: checked,
+      size: size,
+      readOnly: readOnly,
+      disabled: disabled
+    }), /*#__PURE__*/jsx(StyledText, {
+      ref: labelTextRef,
+      isLongerTextRendering: isLongerTextRendering,
+      checked: checked,
+      size: size,
+      disabled: disabled,
+      children: checked ? labelOn : labelOff
+    }))), /*#__PURE__*/jsx(SetLabelWidth, {
+      size: size,
+      ref: widthTextRef,
+      children: longerText
+    })]
+  })), readOnly);
+};
+
+DSControlledToggle.defaultProps = defaultProps;
+const DSControlledToggleWithSchema = describe(DSControlledToggle);
+DSControlledToggleWithSchema.propTypes = propTypes;
+
+export { DSControlledToggle, DSControlledToggleWithSchema };

package/esm/controlled-toggle/defaultProps.js

@@ -0,0 +1,14 @@
+const defaultProps = {
+  labelOn: 'ON',
+  labelOff: 'OFF',
+  name: '',
+  value: '',
+  checked: false,
+  onClick: () => null,
+  size: 'm',
+  readonly: false,
+  active: false,
+  disabled: false
+};
+
+export { defaultProps };

package/esm/controlled-toggle/index.d.js

@@ -0,0 +1 @@
+

package/esm/controlled-toggle/index.js

@@ -0,0 +1 @@
+export { DSControlledToggle, DSControlledToggleWithSchema } from './ControlledToggle.js';

package/esm/controlled-toggle/propTypes.js

@@ -0,0 +1,18 @@
+import { PropTypes } from 'react-desc';
+
+const propTypes = {
+  labelOn: PropTypes.string.description('Label when toggle is checked'),
+  labelOff: PropTypes.string.description('Label when toggle is unchecked'),
+  value: PropTypes.string.description('Value attribute for toggle'),
+  name: PropTypes.string.description('Name attribute for toggle'),
+  checked: PropTypes.bool.description('Wether the toggle is checked or not'),
+  onchange: PropTypes.func.description('OnClick callback'),
+  size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),
+  readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not'),
+  active: PropTypes.bool.description('Wether the toggle has active styles or not'),
+  disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),
+  containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),
+  id: PropTypes.string.description('Unique id.')
+};
+
+export { propTypes };

package/esm/controlled-toggle/styles.js

@@ -0,0 +1,158 @@
+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"
+})(["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
+  } = _ref;
+  return containerHeight[size];
+}, _ref2 => {
+  let {
+    size
+  } = _ref2;
+  return borderRadius[size];
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.brand[300];
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.brand[600];
+});
+const StyledLabel = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-v733m4-1"
+})(["width:", ";height:", ";z-index:2;outline:none;border-radius:", ";"], _ref5 => {
+  let {
+    width,
+    size
+  } = _ref5;
+  return "calc(".concat(width, "px + ").concat(margin[size], ")");
+}, _ref6 => {
+  let {
+    size
+  } = _ref6;
+  return labelHeight[size];
+}, _ref7 => {
+  let {
+    size
+  } = _ref7;
+  return labelHeight[size];
+});
+const StyledVisibleContent = /*#__PURE__*/styled.label.withConfig({
+  componentId: "sc-v733m4-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
+  } = _ref8;
+  return checked ? 'row-reverse' : 'row';
+}, _ref9 => {
+  let {
+    size
+  } = _ref9;
+  return "calc(".concat(labelHeight[size], " - 4px)");
+}, _ref10 => {
+  let {
+    theme,
+    size,
+    checked,
+    disabled,
+    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    ");
+}, _ref11 => {
+  let {
+    theme,
+    checked,
+    disabled,
+    readOnly,
+    active
+  } = _ref11;
+  return handleBackgroundColor(checked, disabled, readOnly, active, theme);
+}, _ref12 => {
+  let {
+    disabled,
+    readOnly
+  } = _ref12;
+  return handleCursors(disabled, readOnly);
+});
+const StyledCircle = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-v733m4-3"
+})(["height:", ";width:", ";border-radius:50%;background-color:", ";"], _ref13 => {
+  let {
+    size
+  } = _ref13;
+  return circleValues[size];
+}, _ref14 => {
+  let {
+    size
+  } = _ref14;
+  return circleValues[size];
+}, _ref15 => {
+  let {
+    theme,
+    readOnly
+  } = _ref15;
+  return readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'];
+});
+const StyledText = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-v733m4-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
+  } = _ref16;
+  return isLongerTextRendering ? 'flex-start' : 'center';
+}, _ref17 => {
+  let {
+    theme,
+    size
+  } = _ref17;
+  return handleFontSize(size, theme);
+}, _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.fontWeights.semibold;
+}, _ref19 => {
+  let {
+    theme,
+    disabled
+  } = _ref19;
+  return disabled ? '#5c6574' : theme.colors.neutral['000'];
+}, _ref20 => {
+  let {
+    isLongerTextRendering,
+    checked
+  } = _ref20;
+  return isLongerTextRendering && checked ? "margin-left: 6px;" : undefined;
+}, _ref21 => {
+  let {
+    isLongerTextRendering,
+    checked
+  } = _ref21;
+  return isLongerTextRendering && !checked ? "margin-left: 4px;" : undefined;
+});
+const StyledInput = /*#__PURE__*/styled.input.withConfig({
+  componentId: "sc-v733m4-5"
+})(["position:absolute;opacity:0;z-index:20;height:100%;width:100%;cursor:pointer;"]);
+const SetLabelWidth = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-v733m4-6"
+})(["font-size:", ";font-weight:", ";width:auto;position:absolute;white-space:nowrap;visibility:hidden;"], _ref22 => {
+  let {
+    theme,
+    size
+  } = _ref22;
+  return handleFontSize(size, theme);
+}, _ref23 => {
+  let {
+    theme
+  } = _ref23;
+  return theme.fontWeights.semibold;
+});
+
+export { SetLabelWidth, StyledCircle, StyledContainer, StyledInput, StyledLabel, StyledText, StyledVisibleContent };

package/esm/controlled-toggle/utils/addTooltipOnReadOnly.js

@@ -0,0 +1,14 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { DSTooltipV2 } from '@elliemae/ds-tooltip';
+
+const addTooltipOnReadOnly = (Component, readOnly) => {
+  if (readOnly) return /*#__PURE__*/_jsx(DSTooltipV2, {
+    title: "Read Only",
+    offset: [0, 9],
+    triggerComponent: Component
+  });
+  return Component;
+};
+
+export { addTooltipOnReadOnly };

package/esm/controlled-toggle/utils/styleHelpers.js

@@ -0,0 +1,91 @@
+const circleValues = {
+  s: '14px',
+  m: '20px',
+  l: '28px'
+};
+const margin = {
+  s: '26px',
+  m: '34px',
+  l: '42px'
+};
+const containerHeight = {
+  s: '20px',
+  m: '28px',
+  l: '36px'
+};
+const labelHeight = {
+  s: '16px',
+  m: '24px',
+  l: '32px'
+};
+const borderRadius = {
+  s: '16px',
+  m: '20px',
+  l: '22px'
+};
+const handleFontSize = (size, _ref) => {
+  let {
+    fontSizes
+  } = _ref;
+
+  switch (size) {
+    case 's':
+      return fontSizes.microText[200];
+
+    case 'm':
+      return '15px';
+
+    case 'l':
+      return '20px';
+
+    default:
+      return '15px';
+  }
+};
+const handleBackgroundColor = (checked, disabled, readOnly, active, _ref2) => {
+  let {
+    colors
+  } = _ref2;
+
+  if (disabled) {
+    return colors.neutral[100];
+  } else if (readOnly) {
+    return colors.neutral[500];
+  } else if (!active && checked) {
+    return colors.brand[600];
+  } else if (!active && !checked) {
+    return colors.neutral[500];
+  } else if (active && checked) {
+    return colors.brand[700];
+  } else if (active && !checked) {
+    return colors.neutral[600];
+  }
+};
+const handleBorderColor = (checked, disabled, readOnly, active, _ref3) => {
+  let {
+    colors
+  } = _ref3;
+
+  if (disabled) {
+    return colors.neutral[100];
+  } else if (readOnly) {
+    return colors.neutral[500];
+  } else if (!active && checked) {
+    return colors.brand[700];
+  } else if (!active && !checked) {
+    return colors.neutral[500];
+  } else if (active && checked) {
+    return colors.brand[800];
+  } else if (active && !checked) {
+    return colors.neutral[700];
+  }
+};
+const handleCursors = (disabled, readOnly) => {
+  if (disabled) {
+    return 'not-allowed';
+  } else if (readOnly) {
+    return 'default';
+  } else return 'pointer';
+};
+
+export { borderRadius, circleValues, containerHeight, handleBackgroundColor, handleBorderColor, handleCursors, handleFontSize, labelHeight, margin };

package/esm/index.js

@@ -0,0 +1,14 @@
+export { DSControlledCheckbox, DSControlledCheckboxWithSchema } from './controlled-checkbox/ControlledCheckbox.js';
+export { DSControlledDateRangePicker, DSControlledDateRangePickerWithSchema } from './controlled-date-range-picker/ControlledDateRangePicker.js';
+export { ControlledDateRangePickerDatatestid } from './controlled-date-range-picker/ControlledDateRangePickerDatatestid.js';
+export { CONTROLLED_DATE_RANGE_PICKER_TYPES } from './controlled-date-range-picker/ControlledDateRangePickerTypes.js';
+export { DSControlledDateTimePicker, DSControlledDateTimePickerWithSchema } from './controlled-date-time-picker/ControlledDateTimePicker.js';
+export { ControlledDateTimePickerDatatestid } from './controlled-date-time-picker/ControlledDateTimePickerDatatestid.js';
+export { CONTROLLED_DATE_TIME_PICKER_TYPES } from './controlled-date-time-picker/ControlledDateTimePickerTypes.js';
+export { deconstructValuesFromDateString, prependStringWithPlaceHolders } from './controlled-date-time-picker/utils/stringHelpers.js';
+export { getValidationDateTimeStringMetaInfo } from './controlled-date-time-picker/utils/dateTimeHelpers.js';
+export { getDateStringFromDay, getDateValuesFromDate, getDayFromDateString, getValidationDateStringMetaInfo } from './controlled-date-time-picker/utils/dateHelpers.js';
+export { getValidationTimeStringMetaInfo } from './controlled-date-time-picker/utils/timeHelpers.js';
+export { DSControlledToggle, DSControlledToggleWithSchema } from './controlled-toggle/ControlledToggle.js';
+export { DSAutocomplete, DSAutocompleteWithSchema } from './controlled-autocomplete/Autocomplete.js';
+export { DSComboBox, DSComboBoxWithSchema } from './controlled-combobox/ComboBox.js';