@veracity/vui 1.9.0 → 1.9.2

package/dist/cjs/breadcrumbs/breadcrumbsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbsItem.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbsItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAG7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAG1D,yBAAyB;AACzB,eAAO,MAAM,eAAe,2CAWmB,CAAA;AAE/C,eAAe,eAAe,CAAA"}
+{"version":3,"file":"breadcrumbsItem.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbsItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAG7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAG1D,yBAAyB;AACzB,eAAO,MAAM,eAAe,2CAkBmB,CAAA;AAE/C,eAAe,eAAe,CAAA"}

package/dist/cjs/breadcrumbs/breadcrumbsItem.js

@@ -22,10 +22,10 @@ const icon_1 = require("../icon");
 const utils_1 = require("../utils");
 const context_1 = require("./context");
 /** A Breadcrumb item. */
-exports.BreadcrumbsItem = (0, core_1.vui)(props => {
+exports.BreadcrumbsItem = (0, core_1.vui)((props, ref) => {
     const _a = (0, core_1.omitThemingProps)(props), { className, children, icon } = _a, rest = __rest(_a, ["className", "children", "icon"]);
     const styles = (0, core_1.useStyleConfig)('Breadcrumbs', (0, context_1.useBreadcrumbsContext)());
-    return (react_1.default.createElement(box_1.Box, Object.assign({ alignItems: "center", className: (0, utils_1.cs)('vui-breadcrumbs-item', className), p: 0 }, rest, styles.item),
+    return (react_1.default.createElement(box_1.Box, Object.assign({ alignItems: "center", className: (0, utils_1.cs)('vui-breadcrumbs-item', className), p: 0, ref: ref }, rest, styles.item),
         !!icon && react_1.default.createElement(icon_1.Icon, { name: icon, size: "sm" }),
         children));
 });

package/dist/cjs/input/input.js

@@ -61,8 +61,8 @@ exports.InputBase = core_1.styled.divBox `
   width: 100%;
 
   &[aria-disabled='true'] {
-    background-color: disabled.bg;
-    color: disabled.color;
+    background-color: disabled .bg;
+    color: disabled .color;
     cursor: not-allowed;
   }
 `;
@@ -78,7 +78,7 @@ exports.Input = (0, core_1.vui)((props, ref) => {
     const [valueInternal, setValueInternal] = (0, react_1.useState)(defaultValue);
     const states = Object.assign(Object.assign({}, consts_1.inputStateMapping), stateMapping);
     const computedColorScheme = (0, utils_1.filterUndefined)({
-        colorScheme: (_a = colorScheme !== null && colorScheme !== void 0 ? colorScheme : (isInvalid ? consts_1.redColor : undefined)) !== null && _a !== void 0 ? _a : (_b = states[state]) === null || _b === void 0 ? void 0 : _b.colorScheme
+        colorScheme: (_a = colorScheme !== null && colorScheme !== void 0 ? colorScheme : (isInvalid ? 'red' : undefined)) !== null && _a !== void 0 ? _a : (_b = states[state]) === null || _b === void 0 ? void 0 : _b.colorScheme
     });
     const styles = (0, core_1.useStyleConfig)('Input', Object.assign(Object.assign({}, computedColorScheme), props));
     const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);

package/dist/cjs/sidemenu/sidemenuItem.js

@@ -47,7 +47,7 @@ const t_1 = __importDefault(require("../t"));
 const utils_1 = require("../utils");
 const context_1 = require("./context");
 /** A menu item. */
-exports.SidemenuItem = (0, core_1.vui)(props => {
+exports.SidemenuItem = (0, core_1.vui)((props, ref) => {
     const _a = (0, core_1.omitThemingProps)(props), { className, children, icon, iconSize = 'md', isActive, onClick, title } = _a, rest = __rest(_a, ["className", "children", "icon", "iconSize", "isActive", "onClick", "title"]);
     const [displayChildren, setDisplayChildren] = (0, react_1.useState)(true);
     const { isExpandedInternal } = (0, context_1.useSidemenuContext)();
@@ -60,7 +60,7 @@ exports.SidemenuItem = (0, core_1.vui)(props => {
         e.stopPropagation();
         setDisplayChildren(!displayChildren);
     };
-    return (react_1.default.createElement(box_1.default, { flexDirection: "column", w: "100%" },
+    return (react_1.default.createElement(box_1.default, { flexDirection: "column", ref: ref, w: "100%" },
         react_1.default.createElement(button_1.default, Object.assign({ alignItems: "center", border: "none", borderLeft: "3px solid black", borderLeftColor: isActive ? 'blue.80' : 'transparent', borderRadius: 0, className: (0, utils_1.cs)('vui-sidemenu-item', className), h: "auto", justifyContent: "space-between", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(), p: 0, variant: "text", w: "100%" }, rest),
             innerContent,
             !!children && isExpandedInternal && (react_1.default.createElement(button_1.default, { className: "vui-sidemenu-item-expand", icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "xs", variant: "text" }))),

package/dist/esm/breadcrumbs/breadcrumbsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbsItem.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbsItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAG7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAG1D,yBAAyB;AACzB,eAAO,MAAM,eAAe,2CAWmB,CAAA;AAE/C,eAAe,eAAe,CAAA"}
+{"version":3,"file":"breadcrumbsItem.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/breadcrumbsItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAyC,YAAY,EAAE,MAAM,SAAS,CAAA;AAG7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAG1D,yBAAyB;AACzB,eAAO,MAAM,eAAe,2CAkBmB,CAAA;AAE/C,eAAe,eAAe,CAAA"}

package/dist/esm/breadcrumbs/breadcrumbsItem.js

@@ -5,10 +5,10 @@ import { Icon } from '../icon';
 import { cs } from '../utils';
 import { useBreadcrumbsContext } from './context';
 /** A Breadcrumb item. */
-export const BreadcrumbsItem = vui(props => {
+export const BreadcrumbsItem = vui((props, ref) => {
     const { className, children, icon, ...rest } = omitThemingProps(props);
     const styles = useStyleConfig('Breadcrumbs', useBreadcrumbsContext());
-    return (React.createElement(Box, { alignItems: "center", className: cs('vui-breadcrumbs-item', className), p: 0, ...rest, ...styles.item },
+    return (React.createElement(Box, { alignItems: "center", className: cs('vui-breadcrumbs-item', className), p: 0, ref: ref, ...rest, ...styles.item },
         !!icon && React.createElement(Icon, { name: icon, size: "sm" }),
         children));
 });

package/dist/esm/input/input.js

@@ -21,8 +21,8 @@ export const InputBase = styled.divBox `
   width: 100%;
 
   &[aria-disabled='true'] {
-    background-color: disabled.bg;
-    color: disabled.color;
+    background-color: disabled .bg;
+    color: disabled .color;
     cursor: not-allowed;
   }
 `;
@@ -37,7 +37,7 @@ export const Input = vui((props, ref) => {
     const [valueInternal, setValueInternal] = useState(defaultValue);
     const states = { ...inputStateMapping, ...stateMapping };
     const computedColorScheme = filterUndefined({
-        colorScheme: colorScheme ?? (isInvalid ? redColor : undefined) ?? states[state]?.colorScheme
+        colorScheme: colorScheme ?? (isInvalid ? 'red' : undefined) ?? states[state]?.colorScheme
     });
     const styles = useStyleConfig('Input', { ...computedColorScheme, ...props });
     const context = useMemo(() => filterUndefined({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);

package/dist/esm/sidemenu/sidemenuItem.js

@@ -7,7 +7,7 @@ import T from '../t';
 import { cs } from '../utils';
 import { useSidemenuContext } from './context';
 /** A menu item. */
-export const SidemenuItem = vui(props => {
+export const SidemenuItem = vui((props, ref) => {
     const { className, children, icon, iconSize = 'md', isActive, onClick, title, ...rest } = omitThemingProps(props);
     const [displayChildren, setDisplayChildren] = useState(true);
     const { isExpandedInternal } = useSidemenuContext();
@@ -20,7 +20,7 @@ export const SidemenuItem = vui(props => {
         e.stopPropagation();
         setDisplayChildren(!displayChildren);
     };
-    return (React.createElement(Box, { flexDirection: "column", w: "100%" },
+    return (React.createElement(Box, { flexDirection: "column", ref: ref, w: "100%" },
         React.createElement(Button, { alignItems: "center", border: "none", borderLeft: "3px solid black", borderLeftColor: isActive ? 'blue.80' : 'transparent', borderRadius: 0, className: cs('vui-sidemenu-item', className), h: "auto", justifyContent: "space-between", onClick: () => onClick?.(), p: 0, variant: "text", w: "100%", ...rest },
             innerContent,
             !!children && isExpandedInternal && (React.createElement(Button, { className: "vui-sidemenu-item-expand", icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: toggle, size: "xs", variant: "text" }))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/breadcrumbs/breadcrumbsItem.tsx

@@ -8,13 +8,20 @@ import { BreadcrumbsItemProps } from './breadcrumbs.types'
 import { useBreadcrumbsContext } from './context'
 
 /** A Breadcrumb item. */
-export const BreadcrumbsItem = vui<'div', BreadcrumbsItemProps>(props => {
+export const BreadcrumbsItem = vui<'div', BreadcrumbsItemProps>((props, ref) => {
   const { className, children, icon, ...rest } = omitThemingProps(props)
 
   const styles = useStyleConfig('Breadcrumbs', useBreadcrumbsContext())
 
   return (
-    <Box alignItems="center" className={cs('vui-breadcrumbs-item', className)} p={0} {...rest} {...styles.item}>
+    <Box
+      alignItems="center"
+      className={cs('vui-breadcrumbs-item', className)}
+      p={0}
+      ref={ref}
+      {...rest}
+      {...styles.item}
+    >
       {!!icon && <Icon name={icon} size="sm" />}
       {children}
     </Box>

package/src/input/input.tsx

@@ -24,8 +24,8 @@ export const InputBase = styled.divBox`
   width: 100%;
 
   &[aria-disabled='true'] {
-    background-color: disabled.bg;
-    color: disabled.color;
+    background-color: disabled .bg;
+    color: disabled .color;
     cursor: not-allowed;
   }
 `
@@ -81,7 +81,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
   const [valueInternal, setValueInternal] = useState(defaultValue)
   const states = { ...inputStateMapping, ...stateMapping }
   const computedColorScheme = filterUndefined({
-    colorScheme: colorScheme ?? (isInvalid ? redColor : undefined) ?? states[state]?.colorScheme
+    colorScheme: colorScheme ?? (isInvalid ? 'red' : undefined) ?? states[state]?.colorScheme
   })
 
   const styles = useStyleConfig('Input', { ...computedColorScheme, ...props })

package/src/sidemenu/sidemenuItem.tsx

@@ -10,7 +10,7 @@ import { useSidemenuContext } from './context'
 import { SidemenuItemProps } from './sidemenu.types'
 
 /** A menu item. */
-export const SidemenuItem = vui<'button', SidemenuItemProps>(props => {
+export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
   const { className, children, icon, iconSize = 'md', isActive, onClick, title, ...rest } = omitThemingProps(props)
 
   const [displayChildren, setDisplayChildren] = useState(true)
@@ -37,7 +37,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>(props => {
   }
 
   return (
-    <Box flexDirection="column" w="100%">
+    <Box flexDirection="column" ref={ref} w="100%">
       <Button
         alignItems="center"
         border="none"