@elliemae/ds-form 2.1.0-rc.0 → 2.1.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/cjs/MenuItem/components/Section/styled.js +2 -2
  2. package/cjs/MenuItem/components/Separator/styled.js +2 -2
  3. package/cjs/MenuItem/components/SubmenuItem/index.js +1 -1
  4. package/cjs/MenuItem/components/styled.js +4 -9
  5. package/esm/MenuItem/components/Section/styled.js +2 -2
  6. package/esm/MenuItem/components/Separator/styled.js +2 -2
  7. package/esm/MenuItem/components/SubmenuItem/index.js +1 -1
  8. package/esm/MenuItem/components/styled.js +5 -9
  9. package/package.json +23 -23
  10. package/types/MenuItem/components/SubmenuItem/styled.d.ts +1 -1
  11. package/types/MenuItem/components/styled.d.ts +5 -3
  12. package/types/MenuItem/props.d.ts +3 -3
package/cjs/MenuItem/components/Section/styled.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var styled = require('styled-components');
6
- var styledSystem = require('styled-system');
6
+ var styledComponents = require('@xstyled/styled-components');
7
7
 
8
8
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
9
 
@@ -14,7 +14,7 @@ const StyledGroupLabel = /*#__PURE__*/styled__default["default"].span.withConfig
14
14
  })(["font-family:12px;color:", ";"], props => props.theme.colors.neutral[500]);
15
15
  const StyledSectionWrapper = /*#__PURE__*/styled__default["default"].li.withConfig({
16
16
  componentId: "sc-6xya9j-1"
17
- })(["", " ", " list-style:none;padding:0px 16px;height:24px;display:flex;align-items:center;"], styledSystem.position, styledSystem.layout);
17
+ })(["", " ", " ", " list-style:none;padding:0px 16px;height:24px;display:flex;align-items:center;"], styledComponents.position, styledComponents.layout, styledComponents.sizing);
18
18
 
19
19
  exports.StyledGroupLabel = StyledGroupLabel;
20
20
  exports.StyledSectionWrapper = StyledSectionWrapper;
package/cjs/MenuItem/components/Separator/styled.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var styled = require('styled-components');
6
- var styledSystem = require('styled-system');
6
+ var styledComponents = require('@xstyled/styled-components');
7
7
 
8
8
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
9
 
@@ -14,7 +14,7 @@ const StyledSeparator = /*#__PURE__*/styled__default["default"].hr.withConfig({
14
14
  })(["border:0;border-top:1px solid #697489;margin:4px 0px;padding:0;"]);
15
15
  const StyledSeparatorWrapper = /*#__PURE__*/styled__default["default"].li.withConfig({
16
16
  componentId: "sc-1xat2d9-1"
17
- })(["list-style:none;padding:0px 16px;", " ", ""], styledSystem.position, styledSystem.layout);
17
+ })(["list-style:none;padding:0px 16px;", " ", " ", ""], styledComponents.position, styledComponents.layout, styledComponents.sizing);
18
18
 
19
19
  exports.StyledSeparator = StyledSeparator;
20
20
  exports.StyledSeparatorWrapper = StyledSeparatorWrapper;
package/cjs/MenuItem/components/SubmenuItem/index.js CHANGED
@@ -101,7 +101,7 @@ const SubmenuItem = props$1 => {
101
101
  onClickOutside: onClickOutside,
102
102
  customOffset: [0, 1],
103
103
  wrapperStyles: _objectSpread(_objectSpread({}, wrapperStyles), {}, {
104
- width: '100%'
104
+ w: '100%'
105
105
  }),
106
106
  minWidth: minWidth,
107
107
  maxHeight: maxHeight
package/cjs/MenuItem/components/styled.js CHANGED
@@ -2,24 +2,19 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
5
  var styled = require('styled-components');
7
- var dsSystem = require('@elliemae/ds-system');
8
- var styledSystem = require('styled-system');
6
+ var styledComponents = require('@xstyled/styled-components');
9
7
 
10
8
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
9
 
12
- var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
13
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
14
11
 
15
- var _templateObject, _templateObject2;
16
-
17
12
  const borderOutside = function (color) {
18
13
  let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
19
- return dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n :after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: ", "px solid ", ";\n pointer-events: none;\n z-index: 7;\n }\n"])), width, color);
14
+ return styled.css([":after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:", "px solid ", ";pointer-events:none;z-index:7;}"], width, color);
20
15
  };
21
16
 
22
- const disabledOption = () => dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n"])));
17
+ const disabledOption = () => styled.css(["cursor:not-allowed;*{cursor:not-allowed;}"]);
23
18
 
24
19
  const activeBorderCss = props => borderOutside(props.theme.colors.brand[500]);
25
20
 
@@ -27,7 +22,7 @@ const focusBorderCss = props => borderOutside(props.theme.colors.brand[700], 2);
27
22
 
28
23
  const StyledGlobalMenuItemWrapper = /*#__PURE__*/styled__default["default"].li.withConfig({
29
24
  componentId: "sc-jyoobd-0"
30
- })(["cursor:pointer;height:32px;padding-left:16px;padding-right:16px;display:grid;align-items:center;list-style:none;position:relative;", " ", " ", ";background-color:", ";&:hover{background-color:", ";}"], styledSystem.position, styledSystem.layout, props => {
25
+ })(["cursor:pointer;height:32px;padding-left:16px;padding-right:16px;display:grid;align-items:center;list-style:none;position:relative;", " ", " ", " ", " ", ";background-color:", ";&:hover{background-color:", ";}"], styledComponents.position, styledComponents.layout, styledComponents.sizing, styledComponents.space, props => {
31
26
  if (props.disabled) return disabledOption();
32
27
  if (props.isFocus) return focusBorderCss(props);
33
28
  if (props.isActive) return activeBorderCss(props);
package/esm/MenuItem/components/Section/styled.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import styled from 'styled-components';
2
- import { position, layout } from 'styled-system';
2
+ import { position, layout, sizing } from '@xstyled/styled-components';
3
3
 
4
4
  const StyledGroupLabel = /*#__PURE__*/styled.span.withConfig({
5
5
  componentId: "sc-6xya9j-0"
6
6
  })(["font-family:12px;color:", ";"], props => props.theme.colors.neutral[500]);
7
7
  const StyledSectionWrapper = /*#__PURE__*/styled.li.withConfig({
8
8
  componentId: "sc-6xya9j-1"
9
- })(["", " ", " list-style:none;padding:0px 16px;height:24px;display:flex;align-items:center;"], position, layout);
9
+ })(["", " ", " ", " list-style:none;padding:0px 16px;height:24px;display:flex;align-items:center;"], position, layout, sizing);
10
10
 
11
11
  export { StyledGroupLabel, StyledSectionWrapper };
package/esm/MenuItem/components/Separator/styled.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import styled from 'styled-components';
2
- import { position, layout } from 'styled-system';
2
+ import { position, layout, sizing } from '@xstyled/styled-components';
3
3
 
4
4
  const StyledSeparator = /*#__PURE__*/styled.hr.withConfig({
5
5
  componentId: "sc-1xat2d9-0"
6
6
  })(["border:0;border-top:1px solid #697489;margin:4px 0px;padding:0;"]);
7
7
  const StyledSeparatorWrapper = /*#__PURE__*/styled.li.withConfig({
8
8
  componentId: "sc-1xat2d9-1"
9
- })(["list-style:none;padding:0px 16px;", " ", ""], position, layout);
9
+ })(["list-style:none;padding:0px 16px;", " ", " ", ""], position, layout, sizing);
10
10
 
11
11
  export { StyledSeparator, StyledSeparatorWrapper };
package/esm/MenuItem/components/SubmenuItem/index.js CHANGED
@@ -89,7 +89,7 @@ const SubmenuItem = props => {
89
89
  onClickOutside: onClickOutside,
90
90
  customOffset: [0, 1],
91
91
  wrapperStyles: _objectSpread(_objectSpread({}, wrapperStyles), {}, {
92
- width: '100%'
92
+ w: '100%'
93
93
  }),
94
94
  minWidth: minWidth,
95
95
  maxHeight: maxHeight
package/esm/MenuItem/components/styled.js CHANGED
@@ -1,16 +1,12 @@
1
- import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
- import styled from 'styled-components';
3
- import { css } from '@elliemae/ds-system';
4
- import { position, layout } from 'styled-system';
5
-
6
- var _templateObject, _templateObject2;
1
+ import styled, { css } from 'styled-components';
2
+ import { position, layout, sizing, space } from '@xstyled/styled-components';
7
3
 
8
4
  const borderOutside = function (color) {
9
5
  let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
10
- return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n :after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: ", "px solid ", ";\n pointer-events: none;\n z-index: 7;\n }\n"])), width, color);
6
+ return css([":after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:", "px solid ", ";pointer-events:none;z-index:7;}"], width, color);
11
7
  };
12
8
 
13
- const disabledOption = () => css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n"])));
9
+ const disabledOption = () => css(["cursor:not-allowed;*{cursor:not-allowed;}"]);
14
10
 
15
11
  const activeBorderCss = props => borderOutside(props.theme.colors.brand[500]);
16
12
 
@@ -18,7 +14,7 @@ const focusBorderCss = props => borderOutside(props.theme.colors.brand[700], 2);
18
14
 
19
15
  const StyledGlobalMenuItemWrapper = /*#__PURE__*/styled.li.withConfig({
20
16
  componentId: "sc-jyoobd-0"
21
- })(["cursor:pointer;height:32px;padding-left:16px;padding-right:16px;display:grid;align-items:center;list-style:none;position:relative;", " ", " ", ";background-color:", ";&:hover{background-color:", ";}"], position, layout, props => {
17
+ })(["cursor:pointer;height:32px;padding-left:16px;padding-right:16px;display:grid;align-items:center;list-style:none;position:relative;", " ", " ", " ", " ", ";background-color:", ";&:hover{background-color:", ";}"], position, layout, sizing, space, props => {
22
18
  if (props.disabled) return disabledOption();
23
19
  if (props.isFocus) return focusBorderCss(props);
24
20
  if (props.isActive) return activeBorderCss(props);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form",
3
- "version": "2.1.0-rc.0",
3
+ "version": "2.1.0-rc.4",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Form",
6
6
  "module": "./esm/index.js",
@@ -932,28 +932,28 @@
932
932
  "build": "node ../../scripts/build/build.js"
933
933
  },
934
934
  "dependencies": {
935
- "@elliemae/ds-button": "2.1.0-rc.0",
936
- "@elliemae/ds-circular-progress-indicator": "2.1.0-rc.0",
937
- "@elliemae/ds-classnames": "2.1.0-rc.0",
938
- "@elliemae/ds-controlled-form": "2.1.0-rc.0",
939
- "@elliemae/ds-dropdownmenu": "2.1.0-rc.0",
940
- "@elliemae/ds-form": "2.1.0-rc.0",
941
- "@elliemae/ds-grid": "2.1.0-rc.0",
942
- "@elliemae/ds-icon": "2.1.0-rc.0",
943
- "@elliemae/ds-icons": "2.1.0-rc.0",
944
- "@elliemae/ds-menu": "2.1.0-rc.0",
945
- "@elliemae/ds-overlay": "2.1.0-rc.0",
946
- "@elliemae/ds-pills": "2.1.0-rc.0",
947
- "@elliemae/ds-popper": "2.1.0-rc.0",
948
- "@elliemae/ds-popperjs": "2.1.0-rc.0",
949
- "@elliemae/ds-props-helpers": "2.1.0-rc.0",
950
- "@elliemae/ds-separator": "2.1.0-rc.0",
951
- "@elliemae/ds-shared": "2.1.0-rc.0",
952
- "@elliemae/ds-system": "2.1.0-rc.0",
953
- "@elliemae/ds-text-wrapper": "2.1.0-rc.0",
954
- "@elliemae/ds-tooltip": "2.1.0-rc.0",
955
- "@elliemae/ds-truncated-tooltip-text": "2.1.0-rc.0",
956
- "@elliemae/ds-utilities": "2.1.0-rc.0",
935
+ "@elliemae/ds-button": "2.1.0-rc.4",
936
+ "@elliemae/ds-circular-progress-indicator": "2.1.0-rc.4",
937
+ "@elliemae/ds-classnames": "2.1.0-rc.4",
938
+ "@elliemae/ds-controlled-form": "2.1.0-rc.4",
939
+ "@elliemae/ds-dropdownmenu": "2.1.0-rc.4",
940
+ "@elliemae/ds-form": "2.1.0-rc.4",
941
+ "@elliemae/ds-grid": "2.1.0-rc.4",
942
+ "@elliemae/ds-icon": "2.1.0-rc.4",
943
+ "@elliemae/ds-icons": "2.1.0-rc.4",
944
+ "@elliemae/ds-menu": "2.1.0-rc.4",
945
+ "@elliemae/ds-overlay": "2.1.0-rc.4",
946
+ "@elliemae/ds-pills": "2.1.0-rc.4",
947
+ "@elliemae/ds-popper": "2.1.0-rc.4",
948
+ "@elliemae/ds-popperjs": "2.1.0-rc.4",
949
+ "@elliemae/ds-props-helpers": "2.1.0-rc.4",
950
+ "@elliemae/ds-separator": "2.1.0-rc.4",
951
+ "@elliemae/ds-shared": "2.1.0-rc.4",
952
+ "@elliemae/ds-system": "2.1.0-rc.4",
953
+ "@elliemae/ds-text-wrapper": "2.1.0-rc.4",
954
+ "@elliemae/ds-tooltip": "2.1.0-rc.4",
955
+ "@elliemae/ds-truncated-tooltip-text": "2.1.0-rc.4",
956
+ "@elliemae/ds-utilities": "2.1.0-rc.4",
957
957
  "memoize-one": "~5.1.1",
958
958
  "moment": "~2.29.1",
959
959
  "prop-types": "~15.7.2",
package/types/MenuItem/components/SubmenuItem/styled.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const StyledItemWrapper: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, any, never>;
1
+ export declare const StyledItemWrapper: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, Pick<import("../../props").MenuItemT, "isSelected" | "isFocus" | "isActive"> & import("@xstyled/system").LayoutProps<import("@xstyled/system").Theme> & import("@xstyled/system").SizingProps<import("@xstyled/system").Theme> & import("@xstyled/system").PositionProps<import("@xstyled/system").Theme> & import("@xstyled/system").SpaceProps<import("@xstyled/system").Theme>, never>;
2
2
  export declare const StyledItemLabel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
package/types/MenuItem/components/styled.d.ts CHANGED
@@ -1,3 +1,5 @@
1
- export declare const StyledGlobalMenuItemWrapper: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, any, never>;
2
- export declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, any, never>;
3
- export declare const StyledSubmenuItemWrapper: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, any, never>;
1
+ import { LayoutProps, SizingProps, PositionProps, SpaceProps } from '@xstyled/styled-components';
2
+ import { MenuItemT } from '../props';
3
+ export declare const StyledGlobalMenuItemWrapper: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, Pick<MenuItemT, "isSelected" | "isFocus" | "isActive"> & LayoutProps<import("@xstyled/system").Theme> & SizingProps<import("@xstyled/system").Theme> & PositionProps<import("@xstyled/system").Theme> & SpaceProps<import("@xstyled/system").Theme>, never>;
4
+ export declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, Pick<MenuItemT, "isSelected" | "isFocus" | "isActive"> & LayoutProps<import("@xstyled/system").Theme> & SizingProps<import("@xstyled/system").Theme> & PositionProps<import("@xstyled/system").Theme> & SpaceProps<import("@xstyled/system").Theme>, never>;
5
+ export declare const StyledSubmenuItemWrapper: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, Pick<MenuItemT, "isSelected" | "isFocus" | "isActive"> & LayoutProps<import("@xstyled/system").Theme> & SizingProps<import("@xstyled/system").Theme> & PositionProps<import("@xstyled/system").Theme> & SpaceProps<import("@xstyled/system").Theme>, never>;
package/types/MenuItem/props.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference path="../../../../../shared/typings/react-desc.d.ts" />
2
2
  /// <reference types="react" />
3
- import { LayoutProps } from 'styled-system';
3
+ import { SizingProps } from '@xstyled/styled-components';
4
4
  export interface MenuItemT {
5
5
  dsId: string;
6
6
  value: string;
@@ -21,8 +21,8 @@ export interface MenuItemT {
21
21
  onKeyDown?: React.KeyboardEventHandler;
22
22
  wrapperStyles?: Record<string, unknown>;
23
23
  withVirtualization?: boolean;
24
- minWidth?: LayoutProps['minWidth'];
25
- maxHeight?: LayoutProps['maxHeight'];
24
+ minWidth?: SizingProps['minWidth'];
25
+ maxHeight?: SizingProps['maxHeight'];
26
26
  render?: (props: MenuItemT) => JSX.Element;
27
27
  dataTestid: string;
28
28
  }