@veracity/vui 2.8.0-rc.3 → 2.8.0

package/dist/cjs/menu/menuList.js

@@ -25,7 +25,7 @@ const context_1 = require("./context");
 exports.MenuList = (0, core_1.vui)((props, ref) => {
     const { className, contentProps, contentRef } = props, rest = __rest(props, ["className", "contentProps", "contentRef"]);
     const styles = (0, core_1.useStyleConfig)('Menu', (0, context_1.useMenuContext)());
-    return (react_1.default.createElement(popover_1.PopoverContent, Object.assign({ borderRadius: "1px", ref: contentRef }, contentProps),
+    return (react_1.default.createElement(popover_1.PopoverContent, Object.assign({ borderRadius: 0, ref: contentRef }, contentProps),
         react_1.default.createElement(list_1.default, Object.assign({ className: (0, utils_1.cs)('vui-menuList', className), py: 1, ref: ref, w: "100%" }, styles.list, rest))));
 });
 exports.MenuList.Divider = list_1.default.Divider;

package/dist/cjs/utils/styles.d.ts

@@ -7,6 +7,8 @@ export declare function parseHSL(color: string): {
     s: number;
     l: number;
 };
+/** Builds RGBA string. */
+export declare const buildRGBA: (r: number, g: number, b: number, alpha?: number) => string;
 /** Converts hex color value to rgb with optional alpha property. */
 export declare function hexToRGBA(hex: string, alpha?: number): string;
 export declare function vuiColorToRGBA(color: string, alpha?: number): string;

package/dist/cjs/utils/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAIlC,+EAA+E;AAC/E,wBAAgB,EAAE,CAAC,GAAG,UAAU,EAAE,GAAG,EAAE,UAEtC;AAED,6BAA6B;AAC7B,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM;;;;EAIrC;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAgBpD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAS3D;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UA0CxE;AAED,8CAA8C;AAC9C,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAIlC,+EAA+E;AAC/E,wBAAgB,EAAE,CAAC,GAAG,UAAU,EAAE,GAAG,EAAE,UAEtC;AAED,6BAA6B;AAC7B,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM;;;;EAIrC;AAED,0BAA0B;AAC1B,eAAO,MAAM,SAAS,MAAO,MAAM,KAAK,MAAM,KAAK,MAAM,UAAU,MAAM,WACW,CAAA;AAEpF,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAgBpD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAS3D;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UA0CxE;AAED,8CAA8C;AAC9C,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAA"}

package/dist/cjs/utils/styles.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ellipsisOverflow = exports.HSLToRGBA = exports.vuiColorToRGBA = exports.hexToRGBA = exports.parseHSL = exports.cs = void 0;
-const colors_1 = __importDefault(require("../theme/foundations/colors"));
+exports.ellipsisOverflow = exports.HSLToRGBA = exports.vuiColorToRGBA = exports.hexToRGBA = exports.buildRGBA = exports.parseHSL = exports.cs = void 0;
+const theme_1 = require("../theme");
 /** Concatenates individual className arguments and returns a single string. */
 function cs(...classNames) {
     return classNames.filter(Boolean).join(' ');
@@ -18,6 +15,9 @@ function parseHSL(color) {
     return { h: Number(res === null || res === void 0 ? void 0 : res[0]) || 0, s: Number(res === null || res === void 0 ? void 0 : res[1]) || 0, l: Number(res === null || res === void 0 ? void 0 : res[2]) || 0 };
 }
 exports.parseHSL = parseHSL;
+/** Builds RGBA string. */
+const buildRGBA = (r, g, b, alpha) => alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
+exports.buildRGBA = buildRGBA;
 /** Converts hex color value to rgb with optional alpha property. */
 function hexToRGBA(hex, alpha) {
     let hexStr = hex;
@@ -31,7 +31,7 @@ function hexToRGBA(hex, alpha) {
     const r = parseInt(hexStr.slice(0, 2), 16);
     const g = parseInt(hexStr.slice(2, 4), 16);
     const b = parseInt(hexStr.slice(4, 6), 16);
-    return alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
+    return (0, exports.buildRGBA)(r, g, b, alpha);
 }
 exports.hexToRGBA = hexToRGBA;
 function vuiColorToRGBA(color, alpha) {
@@ -40,7 +40,7 @@ function vuiColorToRGBA(color, alpha) {
     const [colorName, shade] = color.split('.');
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    const x = parseHSL(colors_1.default[colorName][shade]);
+    const x = parseHSL(theme_1.colors[colorName][shade]);
     return HSLToRGBA(x.h, x.s, x.l, alpha || shade === 'main' ? 1 : parseInt(shade));
 }
 exports.vuiColorToRGBA = vuiColorToRGBA;
@@ -83,7 +83,7 @@ function HSLToRGBA(h, s, l, alpha) {
     r = Math.round((r + m) * 255);
     g = Math.round((g + m) * 255);
     b = Math.round((b + m) * 255);
-    return alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
+    return (0, exports.buildRGBA)(r, g, b, alpha);
 }
 exports.HSLToRGBA = HSLToRGBA;
 /** Styling to add ellipsis for long texts. */

package/dist/esm/menu/menuList.js

@@ -8,7 +8,7 @@ import { useMenuContext } from './context';
 export const MenuList = vui((props, ref) => {
     const { className, contentProps, contentRef, ...rest } = props;
     const styles = useStyleConfig('Menu', useMenuContext());
-    return (React.createElement(PopoverContent, { borderRadius: "1px", ref: contentRef, ...contentProps },
+    return (React.createElement(PopoverContent, { borderRadius: 0, ref: contentRef, ...contentProps },
         React.createElement(List, { className: cs('vui-menuList', className), py: 1, ref: ref, w: "100%", ...styles.list, ...rest })));
 });
 MenuList.Divider = List.Divider;

package/dist/esm/utils/styles.d.ts

@@ -7,6 +7,8 @@ export declare function parseHSL(color: string): {
     s: number;
     l: number;
 };
+/** Builds RGBA string. */
+export declare const buildRGBA: (r: number, g: number, b: number, alpha?: number) => string;
 /** Converts hex color value to rgb with optional alpha property. */
 export declare function hexToRGBA(hex: string, alpha?: number): string;
 export declare function vuiColorToRGBA(color: string, alpha?: number): string;

package/dist/esm/utils/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAIlC,+EAA+E;AAC/E,wBAAgB,EAAE,CAAC,GAAG,UAAU,EAAE,GAAG,EAAE,UAEtC;AAED,6BAA6B;AAC7B,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM;;;;EAIrC;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAgBpD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAS3D;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UA0CxE;AAED,8CAA8C;AAC9C,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAIlC,+EAA+E;AAC/E,wBAAgB,EAAE,CAAC,GAAG,UAAU,EAAE,GAAG,EAAE,UAEtC;AAED,6BAA6B;AAC7B,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM;;;;EAIrC;AAED,0BAA0B;AAC1B,eAAO,MAAM,SAAS,MAAO,MAAM,KAAK,MAAM,KAAK,MAAM,UAAU,MAAM,WACW,CAAA;AAEpF,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAgBpD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAS3D;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UA0CxE;AAED,8CAA8C;AAC9C,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAA"}

package/dist/esm/utils/styles.js

@@ -1,4 +1,4 @@
-import colors from '../theme/foundations/colors';
+import { colors } from '../theme';
 /** Concatenates individual className arguments and returns a single string. */
 export function cs(...classNames) {
     return classNames.filter(Boolean).join(' ');
@@ -9,6 +9,8 @@ export function parseHSL(color) {
     const res = regexp?.exec?.(color)?.slice?.(1);
     return { h: Number(res?.[0]) || 0, s: Number(res?.[1]) || 0, l: Number(res?.[2]) || 0 };
 }
+/** Builds RGBA string. */
+export const buildRGBA = (r, g, b, alpha) => alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
 /** Converts hex color value to rgb with optional alpha property. */
 export function hexToRGBA(hex, alpha) {
     let hexStr = hex;
@@ -22,7 +24,7 @@ export function hexToRGBA(hex, alpha) {
     const r = parseInt(hexStr.slice(0, 2), 16);
     const g = parseInt(hexStr.slice(2, 4), 16);
     const b = parseInt(hexStr.slice(4, 6), 16);
-    return alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
+    return buildRGBA(r, g, b, alpha);
 }
 export function vuiColorToRGBA(color, alpha) {
     if (!color.includes('.'))
@@ -72,7 +74,7 @@ export function HSLToRGBA(h, s, l, alpha) {
     r = Math.round((r + m) * 255);
     g = Math.round((g + m) * 255);
     b = Math.round((b + m) * 255);
-    return alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
+    return buildRGBA(r, g, b, alpha);
 }
 /** Styling to add ellipsis for long texts. */
 export const ellipsisOverflow = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.8.0-rc.3",
+  "version": "2.8.0",
   "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/core/vui.ts

@@ -13,7 +13,7 @@ export function vui<C extends React.ElementType, Props = {}>(
   const { memoCompare, isMemo = true } = config ?? {}
 
   if (isMemo) {
-    return React.memo(React.forwardRef(component), memoCompare) as unknown as VuiComponent<C, Props>
+    return React.memo(React.forwardRef(component), memoCompare as unknown as any) as unknown as VuiComponent<C, Props>
   }
 
   return React.forwardRef(component) as unknown as VuiComponent<C, Props>

package/src/menu/menuList.tsx

@@ -13,7 +13,7 @@ export const MenuList = vui<'ul', MenuListProps>((props, ref) => {
   const styles = useStyleConfig('Menu', useMenuContext())
 
   return (
-    <PopoverContent borderRadius="1px" ref={contentRef} {...contentProps}>
+    <PopoverContent borderRadius={0} ref={contentRef} {...contentProps}>
       <List className={cs('vui-menuList', className)} py={1} ref={ref} w="100%" {...styles.list} {...rest} />
     </PopoverContent>
   )

package/src/utils/styles.ts

@@ -1,6 +1,6 @@
 import { Property } from 'csstype'
 
-import colors from '../theme/foundations/colors'
+import { colors } from '../theme'
 
 /** Concatenates individual className arguments and returns a single string. */
 export function cs(...classNames: any[]) {
@@ -14,6 +14,10 @@ export function parseHSL(color: string) {
   return { h: Number(res?.[0]) || 0, s: Number(res?.[1]) || 0, l: Number(res?.[2]) || 0 }
 }
 
+/** Builds RGBA string. */
+export const buildRGBA = (r: number, g: number, b: number, alpha?: number) =>
+  alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`
+
 /** Converts hex color value to rgb with optional alpha property. */
 export function hexToRGBA(hex: string, alpha?: number) {
   let hexStr = hex
@@ -30,7 +34,7 @@ export function hexToRGBA(hex: string, alpha?: number) {
   const g = parseInt(hexStr.slice(2, 4), 16)
   const b = parseInt(hexStr.slice(4, 6), 16)
 
-  return alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`
+  return buildRGBA(r, g, b, alpha)
 }
 
 export function vuiColorToRGBA(color: string, alpha?: number) {
@@ -86,7 +90,7 @@ export function HSLToRGBA(h: number, s: number, l: number, alpha?: number) {
   g = Math.round((g + m) * 255)
   b = Math.round((b + m) * 255)
 
-  return alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`
+  return buildRGBA(r, g, b, alpha)
 }
 
 /** Styling to add ellipsis for long texts. */