@veracity/vui 2.14.0 → 2.14.2

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 (18) hide show
  1. package/dist/cjs/definition/definition.d.ts.map +1 -1
  2. package/dist/cjs/definition/definition.js +5 -6
  3. package/dist/cjs/definition/definitionContent.js +2 -2
  4. package/dist/cjs/header/headerMobileToggle.js +1 -1
  5. package/dist/cjs/header/headerSupport.js +1 -1
  6. package/dist/cjs/input/input.js +1 -1
  7. package/dist/esm/definition/definition.d.ts.map +1 -1
  8. package/dist/esm/definition/definition.js +6 -7
  9. package/dist/esm/definition/definitionContent.js +2 -2
  10. package/dist/esm/header/headerMobileToggle.js +1 -1
  11. package/dist/esm/header/headerSupport.js +1 -1
  12. package/dist/esm/input/input.js +1 -1
  13. package/package.json +1 -1
  14. package/src/definition/definition.tsx +21 -15
  15. package/src/definition/definitionContent.tsx +2 -2
  16. package/src/header/headerMobileToggle.tsx +1 -1
  17. package/src/header/headerSupport.tsx +1 -1
  18. package/src/input/input.tsx +1 -1
package/dist/cjs/definition/definition.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"definition.d.ts","sourceRoot":"","sources":["../../../src/definition/definition.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAGpD;;KAEK;AAEL,eAAO,MAAM,sBAAsB,8HAclC,CAAA;AAED,eAAO,MAAM,wBAAwB,8HAkCpC,CAAA;AAGD,eAAO,MAAM,UAAU,uDAiBrB,CAAA;AAGF,eAAe,UAAU,CAAA"}
1
+ {"version":3,"file":"definition.d.ts","sourceRoot":"","sources":["../../../src/definition/definition.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAGpD;;KAEK;AAEL,eAAO,MAAM,sBAAsB,8HAclC,CAAA;AAED,eAAO,MAAM,wBAAwB,8HAkCpC,CAAA;AAGD,eAAO,MAAM,UAAU,uDAsBrB,CAAA;AAGF,eAAe,UAAU,CAAA"}
package/dist/cjs/definition/definition.js CHANGED
@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
17
17
  exports.Definition = exports.DefinitionHorizontalBase = exports.DefinitionVerticalBase = void 0;
18
18
  const react_1 = __importDefault(require("react"));
19
19
  const core_1 = require("../core");
20
+ const utils_1 = require("../utils");
20
21
  const definitionContent_1 = require("./definitionContent");
21
22
  /**
22
23
  * Properties are definition lists
@@ -74,13 +75,11 @@ exports.DefinitionHorizontalBase = core_1.styled.dlBox `
74
75
  `;
75
76
  // @formatter:on
76
77
  exports.Definition = (0, core_1.vui)((props, ref) => {
77
- const _a = props, { orientation = 'horizontal' } = _a, rest = __rest(_a, ["orientation"]);
78
+ const _a = (0, core_1.omitThemingProps)(props), { orientation = 'horizontal', className } = _a, rest = __rest(_a, ["orientation", "className"]);
78
79
  const styles = (0, core_1.useStyleConfig)('Definition', props);
79
- return (react_1.default.createElement(react_1.default.Fragment, null,
80
- orientation === 'horizontal' && (react_1.default.createElement(exports.DefinitionHorizontalBase, Object.assign({ className: "vui-definition" }, styles.container, rest),
81
- react_1.default.createElement(definitionContent_1.DefinitionContent, Object.assign({}, rest)))),
82
- orientation === 'vertical' && (react_1.default.createElement(exports.DefinitionVerticalBase, Object.assign({ className: "vui-definition" }, styles.container, rest),
83
- react_1.default.createElement(definitionContent_1.DefinitionContent, Object.assign({}, rest))))));
80
+ return orientation === 'horizontal' ? (react_1.default.createElement(exports.DefinitionHorizontalBase, Object.assign({ className: (0, utils_1.cs)('vui-definition vui-definition-horizontal', className), ref: ref }, styles.container, rest),
81
+ react_1.default.createElement(definitionContent_1.DefinitionContent, Object.assign({}, rest)))) : (react_1.default.createElement(exports.DefinitionVerticalBase, Object.assign({ className: (0, utils_1.cs)('vui-definition vui-definition-vertical', className), ref: ref }, styles.container, rest),
82
+ react_1.default.createElement(definitionContent_1.DefinitionContent, Object.assign({}, rest))));
84
83
  });
85
84
  exports.Definition.displayName = 'Definition';
86
85
  exports.default = exports.Definition;
package/dist/cjs/definition/definitionContent.js CHANGED
@@ -22,13 +22,13 @@ const icon_1 = __importDefault(require("../icon"));
22
22
  const utils_1 = require("../utils");
23
23
  exports.DefinitionItemKey = core_1.styled.dtBox ``;
24
24
  exports.DefinitionItemValue = core_1.styled.ddBox ``;
25
- exports.DefinitionContent = (0, core_1.vui)(props => {
25
+ exports.DefinitionContent = (0, core_1.vui)((props, ref) => {
26
26
  const { iconLeft, iconRight, isLabelBold, isValueBold, items } = props;
27
27
  const styles = (0, core_1.useStyleConfig)('Definition', props);
28
28
  return (react_1.default.createElement(react_1.default.Fragment, null, (0, utils_1.isArray)(items)
29
29
  ? items.map((_a, index) => {
30
30
  var { key, value } = _a, props = __rest(_a, ["key", "value"]);
31
- return (react_1.default.createElement(box_1.default, { className: "vui-definitionItemWrapper", key: index },
31
+ return (react_1.default.createElement(box_1.default, { className: "vui-definitionItemWrapper", key: index, ref: ref },
32
32
  react_1.default.createElement(exports.DefinitionItemKey, Object.assign({ fontWeight: isLabelBold ? 'demi' : 'default' }, styles.dt),
33
33
  props.keyHasIcon && iconLeft && (react_1.default.createElement(icon_1.default, Object.assign({ className: (0, utils_1.cs)('vui-definitionIcon'), name: iconLeft }, styles.icon))),
34
34
  key,
package/dist/cjs/header/headerMobileToggle.js CHANGED
@@ -28,7 +28,7 @@ exports.HeaderMobileToggle = (0, core_1.vui)((props, ref) => {
28
28
  const { isMobileOpen, mobileToggleRef, setIsMobileOpen } = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {};
29
29
  const styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
30
30
  const iconName = isMobileOpen ? 'falTimes' : 'falBars';
31
- return (react_1.default.createElement(button_1.IconButton, Object.assign({ className: (0, utils_1.cs)('vui-headerMobileToggle', className), icon: react_1.default.createElement(icon_1.default, { name: iconName }), ml: 1, onClick: () => setIsMobileOpen(s => !s), p: "3px", ref: (0, utils_1.mergeRefs)(ref, mobileToggleRef), title: "mobileToggleButton" }, styles.mobileToggle, rest)));
31
+ return (react_1.default.createElement(button_1.IconButton, Object.assign({ className: (0, utils_1.cs)('vui-headerMobileToggle', className), icon: react_1.default.createElement(icon_1.default, { name: iconName }), ml: 1, onClick: () => setIsMobileOpen(s => !s), p: "3px", ref: (0, utils_1.mergeRefs)(ref, mobileToggleRef), title: "More options" }, styles.mobileToggle, rest)));
32
32
  });
33
33
  exports.HeaderMobileToggle.displayName = 'HeaderMobileToggle';
34
34
  exports.default = exports.HeaderMobileToggle;
package/dist/cjs/header/headerSupport.js CHANGED
@@ -37,7 +37,7 @@ function HeaderSupport(props) {
37
37
  const offsetX = isTablet ? 162 : 135;
38
38
  return (react_1.default.createElement(react_1.default.Fragment, null,
39
39
  react_1.default.createElement(menu_1.default, Object.assign({ isLazy: false, offset: [offsetX, 16], placement: "bottom-end", size: "lg" }, rest),
40
- react_1.default.createElement(menu_1.default.Button, Object.assign({ className: "vui-app-info-trigger", color: styles.button.color, icon: "falQuestionCircle", ml: 1, size: "lg", title: "My services" }, styles.button)),
40
+ react_1.default.createElement(menu_1.default.Button, Object.assign({ className: "vui-app-info-trigger", color: styles.button.color, icon: "falQuestionCircle", ml: 1, size: "lg", title: "Support" }, styles.button)),
41
41
  react_1.default.createElement(menu_1.default.List, Object.assign({ maxH: 295, right: 0, w: isTablet ? 280 : 320 }, styles.list),
42
42
  react_1.default.createElement(ListContent, { links: links })))));
43
43
  }
package/dist/cjs/input/input.js CHANGED
@@ -59,7 +59,7 @@ exports.InputBase = core_1.styled.divBox `
59
59
  flex-shrink: 0;
60
60
  outline: none;
61
61
  position: relative;
62
- transition-duration: fast;
62
+ transition-duration: 0s;
63
63
  width: 100%;
64
64
 
65
65
  &[aria-disabled='true'] {
package/dist/esm/definition/definition.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"definition.d.ts","sourceRoot":"","sources":["../../../src/definition/definition.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAGpD;;KAEK;AAEL,eAAO,MAAM,sBAAsB,8HAclC,CAAA;AAED,eAAO,MAAM,wBAAwB,8HAkCpC,CAAA;AAGD,eAAO,MAAM,UAAU,uDAiBrB,CAAA;AAGF,eAAe,UAAU,CAAA"}
1
+ {"version":3,"file":"definition.d.ts","sourceRoot":"","sources":["../../../src/definition/definition.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAGpD;;KAEK;AAEL,eAAO,MAAM,sBAAsB,8HAclC,CAAA;AAED,eAAO,MAAM,wBAAwB,8HAkCpC,CAAA;AAGD,eAAO,MAAM,UAAU,uDAsBrB,CAAA;AAGF,eAAe,UAAU,CAAA"}
package/dist/esm/definition/definition.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
- import { styled, useStyleConfig, vui } from '../core';
2
+ import { omitThemingProps, styled, useStyleConfig, vui } from '../core';
3
+ import { cs } from '../utils';
3
4
  import { DefinitionContent } from './definitionContent';
4
5
  /**
5
6
  * Properties are definition lists
@@ -57,13 +58,11 @@ export const DefinitionHorizontalBase = styled.dlBox `
57
58
  `;
58
59
  // @formatter:on
59
60
  export const Definition = vui((props, ref) => {
60
- const { orientation = 'horizontal', ...rest } = props;
61
+ const { orientation = 'horizontal', className, ...rest } = omitThemingProps(props);
61
62
  const styles = useStyleConfig('Definition', props);
62
- return (React.createElement(React.Fragment, null,
63
- orientation === 'horizontal' && (React.createElement(DefinitionHorizontalBase, { className: "vui-definition", ...styles.container, ...rest },
64
- React.createElement(DefinitionContent, { ...rest }))),
65
- orientation === 'vertical' && (React.createElement(DefinitionVerticalBase, { className: "vui-definition", ...styles.container, ...rest },
66
- React.createElement(DefinitionContent, { ...rest })))));
63
+ return orientation === 'horizontal' ? (React.createElement(DefinitionHorizontalBase, { className: cs('vui-definition vui-definition-horizontal', className), ref: ref, ...styles.container, ...rest },
64
+ React.createElement(DefinitionContent, { ...rest }))) : (React.createElement(DefinitionVerticalBase, { className: cs('vui-definition vui-definition-vertical', className), ref: ref, ...styles.container, ...rest },
65
+ React.createElement(DefinitionContent, { ...rest })));
67
66
  });
68
67
  Definition.displayName = 'Definition';
69
68
  export default Definition;
package/dist/esm/definition/definitionContent.js CHANGED
@@ -5,11 +5,11 @@ import Icon from '../icon';
5
5
  import { cs, isArray } from '../utils';
6
6
  export const DefinitionItemKey = styled.dtBox ``;
7
7
  export const DefinitionItemValue = styled.ddBox ``;
8
- export const DefinitionContent = vui(props => {
8
+ export const DefinitionContent = vui((props, ref) => {
9
9
  const { iconLeft, iconRight, isLabelBold, isValueBold, items } = props;
10
10
  const styles = useStyleConfig('Definition', props);
11
11
  return (React.createElement(React.Fragment, null, isArray(items)
12
- ? items.map(({ key, value, ...props }, index) => (React.createElement(Box, { className: "vui-definitionItemWrapper", key: index },
12
+ ? items.map(({ key, value, ...props }, index) => (React.createElement(Box, { className: "vui-definitionItemWrapper", key: index, ref: ref },
13
13
  React.createElement(DefinitionItemKey, { fontWeight: isLabelBold ? 'demi' : 'default', ...styles.dt },
14
14
  props.keyHasIcon && iconLeft && (React.createElement(Icon, { className: cs('vui-definitionIcon'), name: iconLeft, ...styles.icon })),
15
15
  key,
package/dist/esm/header/headerMobileToggle.js CHANGED
@@ -10,7 +10,7 @@ export const HeaderMobileToggle = vui((props, ref) => {
10
10
  const { isMobileOpen, mobileToggleRef, setIsMobileOpen } = useHeaderContext() ?? {};
11
11
  const styles = useStyleConfig('Header', useHeaderContext());
12
12
  const iconName = isMobileOpen ? 'falTimes' : 'falBars';
13
- return (React.createElement(IconButton, { className: cs('vui-headerMobileToggle', className), icon: React.createElement(Icon, { name: iconName }), ml: 1, onClick: () => setIsMobileOpen(s => !s), p: "3px", ref: mergeRefs(ref, mobileToggleRef), title: "mobileToggleButton", ...styles.mobileToggle, ...rest }));
13
+ return (React.createElement(IconButton, { className: cs('vui-headerMobileToggle', className), icon: React.createElement(Icon, { name: iconName }), ml: 1, onClick: () => setIsMobileOpen(s => !s), p: "3px", ref: mergeRefs(ref, mobileToggleRef), title: "More options", ...styles.mobileToggle, ...rest }));
14
14
  });
15
15
  HeaderMobileToggle.displayName = 'HeaderMobileToggle';
16
16
  export default HeaderMobileToggle;
package/dist/esm/header/headerSupport.js CHANGED
@@ -20,7 +20,7 @@ export function HeaderSupport(props) {
20
20
  const offsetX = isTablet ? 162 : 135;
21
21
  return (React.createElement(React.Fragment, null,
22
22
  React.createElement(Menu, { isLazy: false, offset: [offsetX, 16], placement: "bottom-end", size: "lg", ...rest },
23
- React.createElement(Menu.Button, { className: "vui-app-info-trigger", color: styles.button.color, icon: "falQuestionCircle", ml: 1, size: "lg", title: "My services", ...styles.button }),
23
+ React.createElement(Menu.Button, { className: "vui-app-info-trigger", color: styles.button.color, icon: "falQuestionCircle", ml: 1, size: "lg", title: "Support", ...styles.button }),
24
24
  React.createElement(Menu.List, { maxH: 295, right: 0, w: isTablet ? 280 : 320, ...styles.list },
25
25
  React.createElement(ListContent, { links: links })))));
26
26
  }
package/dist/esm/input/input.js CHANGED
@@ -19,7 +19,7 @@ export const InputBase = styled.divBox `
19
19
  flex-shrink: 0;
20
20
  outline: none;
21
21
  position: relative;
22
- transition-duration: fast;
22
+ transition-duration: 0s;
23
23
  width: 100%;
24
24
 
25
25
  &[aria-disabled='true'] {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veracity/vui",
3
- "version": "2.14.0",
3
+ "version": "2.14.2",
4
4
  "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
5
5
  "module": "./dist/esm/index.js",
6
6
  "main": "./dist/cjs/index.js",
package/src/definition/definition.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react'
2
2
 
3
- import { styled, useStyleConfig, vui } from '../core'
3
+ import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
4
+ import { cs } from '../utils'
4
5
  import { DefinitionProps } from './definition.types'
5
6
  import { DefinitionContent } from './definitionContent'
6
7
 
@@ -62,21 +63,26 @@ export const DefinitionHorizontalBase = styled.dlBox`
62
63
  // @formatter:on
63
64
 
64
65
  export const Definition = vui<'dl', DefinitionProps>((props, ref) => {
65
- const { orientation = 'horizontal', ...rest } = props as DefinitionProps
66
+ const { orientation = 'horizontal', className, ...rest } = omitThemingProps(props)
66
67
  const styles = useStyleConfig('Definition', props)
67
- return (
68
- <>
69
- {orientation === 'horizontal' && (
70
- <DefinitionHorizontalBase className="vui-definition" {...styles.container} {...rest}>
71
- <DefinitionContent {...rest} />
72
- </DefinitionHorizontalBase>
73
- )}
74
- {orientation === 'vertical' && (
75
- <DefinitionVerticalBase className="vui-definition" {...styles.container} {...rest}>
76
- <DefinitionContent {...rest} />
77
- </DefinitionVerticalBase>
78
- )}
79
- </>
68
+ return orientation === 'horizontal' ? (
69
+ <DefinitionHorizontalBase
70
+ className={cs('vui-definition vui-definition-horizontal', className)}
71
+ ref={ref}
72
+ {...styles.container}
73
+ {...rest}
74
+ >
75
+ <DefinitionContent {...rest} />
76
+ </DefinitionHorizontalBase>
77
+ ) : (
78
+ <DefinitionVerticalBase
79
+ className={cs('vui-definition vui-definition-vertical', className)}
80
+ ref={ref}
81
+ {...styles.container}
82
+ {...rest}
83
+ >
84
+ <DefinitionContent {...rest} />
85
+ </DefinitionVerticalBase>
80
86
  )
81
87
  })
82
88
 
package/src/definition/definitionContent.tsx CHANGED
@@ -9,7 +9,7 @@ import { DefinitionItemProps, DefinitionProps } from './definition.types'
9
9
  export const DefinitionItemKey = styled.dtBox``
10
10
  export const DefinitionItemValue = styled.ddBox``
11
11
 
12
- export const DefinitionContent = vui<'dl', DefinitionProps>(props => {
12
+ export const DefinitionContent = vui<'dl', DefinitionProps>((props, ref) => {
13
13
  const { iconLeft, iconRight, isLabelBold, isValueBold, items } = props as DefinitionProps
14
14
 
15
15
  const styles = useStyleConfig('Definition', props)
@@ -18,7 +18,7 @@ export const DefinitionContent = vui<'dl', DefinitionProps>(props => {
18
18
  <>
19
19
  {isArray<DefinitionItemProps>(items)
20
20
  ? items.map(({ key, value, ...props }, index) => (
21
- <Box className="vui-definitionItemWrapper" key={index}>
21
+ <Box className="vui-definitionItemWrapper" key={index} ref={ref}>
22
22
  <DefinitionItemKey fontWeight={isLabelBold ? 'demi' : 'default'} {...styles.dt}>
23
23
  {props.keyHasIcon && iconLeft && (
24
24
  <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />
package/src/header/headerMobileToggle.tsx CHANGED
@@ -22,7 +22,7 @@ export const HeaderMobileToggle = vui<'button', ButtonProps>((props, ref) => {
22
22
  onClick={() => setIsMobileOpen(s => !s)}
23
23
  p="3px"
24
24
  ref={mergeRefs(ref, mobileToggleRef)}
25
- title="mobileToggleButton"
25
+ title="More options"
26
26
  {...styles.mobileToggle}
27
27
  {...rest}
28
28
  />
package/src/header/headerSupport.tsx CHANGED
@@ -61,7 +61,7 @@ export function HeaderSupport(props: HeaderSupportProps) {
61
61
  icon="falQuestionCircle"
62
62
  ml={1}
63
63
  size="lg"
64
- title="My services"
64
+ title="Support"
65
65
  {...styles.button}
66
66
  />
67
67
 
package/src/input/input.tsx CHANGED
@@ -22,7 +22,7 @@ export const InputBase = styled.divBox`
22
22
  flex-shrink: 0;
23
23
  outline: none;
24
24
  position: relative;
25
- transition-duration: fast;
25
+ transition-duration: 0s;
26
26
  width: 100%;
27
27
 
28
28
  &[aria-disabled='true'] {