lupine.components 1.1.51 → 1.1.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.51",
+  "version": "1.1.53",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

package/src/component-pool/aspect-ratio/aspect-ratio.tsx

@@ -25,7 +25,7 @@ export const AspectRatio = (props: AspectRatioProps) => {
   bindGlobalStyle(globalCssId, css);
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   const ratio = props.ratio ?? 16 / 9;
@@ -34,7 +34,7 @@ export const AspectRatio = (props: AspectRatioProps) => {
   const paddingTop = `${(1 / ratio) * 100}%`;
 
   return (
-    <div class={['&-container', props.class].join(' ').trim()} ref={ref} css={{ paddingTop, ...props.style }}>
+    <div class={[globalCssId, '&-container', props.class].join(' ').trim()} ref={ref} css={{ paddingTop, ...props.style }}>
       <div class='&-inner'>{props.children}</div>
     </div>
   );

package/src/component-pool/avatar/avatar.tsx

@@ -125,7 +125,7 @@ export const Avatar = (props: AvatarProps) => {
   const avatarContent = new HtmlVar(renderContent());
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   return (
@@ -149,7 +149,7 @@ export const AvatarGroup = (props: AvatarGroupProps) => {
   bindGlobalStyle(globalCssId, groupCss);
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   const children = Array.isArray(props.children) ? props.children : [props.children];
@@ -176,7 +176,7 @@ export const AvatarGroup = (props: AvatarGroupProps) => {
   }
 
   return (
-    <div ref={ref} class={['&-group', props.class].join(' ').trim()} css={props.style}>
+    <div ref={ref} class={[globalCssId, '&-group', props.class].join(' ').trim()} css={props.style}>
       {items}
     </div>
   );

package/src/component-pool/badge/badge.tsx

@@ -64,7 +64,7 @@ export const Badge = (props: BadgeProps) => {
   bindGlobalStyle(globalCssId, badgeCss);
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   let displayContent = props.content;
@@ -85,7 +85,7 @@ export const Badge = (props: BadgeProps) => {
   const showBubble = props.dot || isSup;
 
   return (
-    <div class={['&-container', props.class].join(' ').trim()} ref={ref} css={props.style} onClick={props.onClick}>
+    <div class={[globalCssId, '&-container', props.class].join(' ').trim()} ref={ref} css={props.style} onClick={props.onClick}>
       {/* The Anchor Element */}
       {props.children}
 

package/src/component-pool/breadcrumbs/breadcrumbs.tsx

@@ -91,7 +91,7 @@ export const Breadcrumbs = (props: BreadcrumbsProps) => {
   let timer: any = null;
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
     onLoad: async () => {
       if (!autoCollapse) return;
       const container = ref.current as HTMLElement;
@@ -157,7 +157,7 @@ export const Breadcrumbs = (props: BreadcrumbsProps) => {
 
   return (
     <nav
-      class={['&-container', autoCollapse ? 'is-initializing' : '', props.class].join(' ').trim()}
+      class={[globalCssId, '&-container', autoCollapse ? 'is-initializing' : '', props.class].join(' ').trim()}
       ref={ref}
       css={props.style}
       aria-label='Breadcrumb'

package/src/component-pool/card/card.tsx

@@ -120,14 +120,14 @@ export const Card = (props: CardProps) => {
   bindGlobalStyle(globalCssId, cardCss);
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   const isHorizontal = props.horizontal ? 'horizontal' : '';
   const isHoverable = props.hoverable ? 'hoverable' : '';
 
   return (
-    <div class={['&-container', isHorizontal, isHoverable, props.class].join(' ').trim()} ref={ref} css={props.style}>
+    <div class={[globalCssId, '&-container', isHorizontal, isHoverable, props.class].join(' ').trim()} ref={ref} css={props.style}>
       {props.cover && <div class='&-cover'>{props.cover}</div>}
 
       <div class='&-body'>

package/src/component-pool/carousel/carousel.tsx

@@ -179,7 +179,7 @@ export const Carousel = (props: CarouselProps) => {
   };
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
     onLoad: async () => {
       updateIndicators(0);
       startAutoplay();
@@ -191,7 +191,7 @@ export const Carousel = (props: CarouselProps) => {
 
   return (
     <div
-      class={['&-container', props.class].join(' ').trim()}
+      class={[globalCssId, '&-container', props.class].join(' ').trim()}
       css={props.style}
       ref={ref}
       onMouseEnter={stopAutoplay}

package/src/component-pool/cascader/cascader.tsx

@@ -160,7 +160,7 @@ export const Cascader = (props: CascaderProps) => {
   };
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   const toggleClass = showCircle ? 'circle' : '';
@@ -190,7 +190,7 @@ export const Cascader = (props: CascaderProps) => {
 
   return (
     <div
-      class={['&-container', props.class, initialState ? 'open' : ''].join(' ').trim()}
+      class={[globalCssId, '&-container', props.class, initialState ? 'open' : ''].join(' ').trim()}
       ref={ref}
       css={props.style}
       data-cascader-group={props.group}

package/src/component-pool/charts/gauge-chart.tsx

@@ -10,6 +10,7 @@ export type GaugeChartProps = {
   color?: string;
   width?: string | number;
   height?: string | number;
+  aspectRatio?: number;
   valueFormatter?: (value: number) => string;
 };
 
@@ -60,7 +61,7 @@ export const GaugeChart = (props: GaugeChartProps) => {
       : '';
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   const ratio = props.aspectRatio ?? 16 / 9;
@@ -69,7 +70,7 @@ export const GaugeChart = (props: GaugeChartProps) => {
   const styleStr = `width: ${props.width || '100%'};`;
 
   return (
-    <div ref={ref} class='&-container' style={styleStr}>
+    <div ref={ref} class={[globalCssId, '&-container'].join(' ')} style={styleStr}>
       {props.title && <div class='chart-title'>{props.title}</div>}
 
       <div style={{ flex: 1, position: 'relative', display: 'flex', justifyContent: 'center', minHeight: 0, paddingTop }}>

package/src/component-pool/charts/pie-chart.tsx

@@ -22,7 +22,7 @@ export const PieChart = (props: PieChartProps) => {
   const viewBoxSize = 200;
   const center = viewBoxSize / 2;
   const maxRadius = (viewBoxSize / 2) * 0.9; // 90% of container to leave margin for stroke/anti-aliasing
-  
+
   const globalInnerRadius = maxRadius * innerRadiusRatio;
   const numSeries = seriesList.length;
   // If only 1 series and innerRadiusRatio is 0, ringThickness is maxRadius.
@@ -94,7 +94,7 @@ export const PieChart = (props: PieChartProps) => {
   });
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   const ratio = props.aspectRatio ?? 16 / 9;
@@ -103,7 +103,7 @@ export const PieChart = (props: PieChartProps) => {
   const styleStr = `width: ${props.width || '100%'}; min-height: 200px;`;
 
   return (
-    <div ref={ref} class='&-container' style={styleStr}>
+    <div ref={ref} class={[globalCssId, '&-container'].join(' ')} style={styleStr}>
       {props.title && <div class='chart-title'>{props.title}</div>}
 
       <div

package/src/component-pool/charts/radar-chart.tsx

@@ -109,13 +109,13 @@ export const RadarChart = (props: RadarChartProps) => {
 
       // Fill area
       seriesGroupElements.push(
-        <polygon 
+        <polygon
           class="radar-polygon"
-          points={pointsStr} 
-          fill={color} 
-          fillOpacity='0.15' 
-          stroke={color} 
-          strokeWidth='2' 
+          points={pointsStr}
+          fill={color}
+          fillOpacity='0.15'
+          stroke={color}
+          strokeWidth='2'
           style={{ transition: 'fill-opacity 0.2s ease' }}
         />
       );
@@ -171,9 +171,9 @@ export const RadarChart = (props: RadarChartProps) => {
       };
 
       dataElements.push(
-        <g 
-          class="radar-series" 
-          onMouseEnter={handleGroupMouseEnter} 
+        <g
+          class="radar-series"
+          onMouseEnter={handleGroupMouseEnter}
           onMouseLeave={handleGroupMouseLeave}
         >
           {seriesGroupElements}
@@ -185,7 +185,7 @@ export const RadarChart = (props: RadarChartProps) => {
   };
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   const ratio = props.aspectRatio ?? 16 / 9;
@@ -194,7 +194,7 @@ export const RadarChart = (props: RadarChartProps) => {
   const styleStr = `width: ${props.width || '100%'};`;
 
   return (
-    <div ref={ref} class='&-container' style={styleStr}>
+    <div ref={ref} class={[globalCssId, '&-container'].join(' ')} style={styleStr}>
       {props.title && <div class='chart-title'>{props.title}</div>}
 
       <div style={{ flex: 1, position: 'relative', display: 'flex', justifyContent: 'center', minHeight: 0, paddingTop }}>

package/src/component-pool/charts/scatter-chart.tsx

@@ -1,4 +1,4 @@
-import { bindGlobalStyle, getGlobalStylesId, HtmlVar } from 'lupine.components';
+import { bindGlobalStyle, getGlobalStylesId, HtmlVar, RefProps } from 'lupine.components';
 import { chartCommonCss, getChartColor, BasicChartProps } from './chart-utils';
 import { Tooltip } from '../tooltip';
 
@@ -192,8 +192,8 @@ export const ScatterChart = (props: ScatterChartProps) => {
 
   const chartVar = new HtmlVar(renderChart(1000, 300));
 
-  const ref = {
-    globalCssId,
+  const ref: RefProps = {
+    referToCssId: globalCssId,
     onLoad: async (el: Element) => {
       const ro = new ResizeObserver((entries) => {
         const { width, height } = entries[0].contentRect;
@@ -217,7 +217,7 @@ export const ScatterChart = (props: ScatterChartProps) => {
   const styleStr = `width: ${props.width || '100%'};`;
 
   return (
-    <div ref={ref} class='&-container' style={styleStr}>
+    <div ref={ref} class={[globalCssId, '&-container'].join(' ')} style={styleStr}>
       {props.title && <div class='chart-title'>{props.title}</div>}
 
       <div style={{ flex: 1, position: 'relative', minHeight: 0, paddingTop }}>{chartVar.node}</div>

package/src/component-pool/copy-button/copy-button.tsx

@@ -114,7 +114,7 @@ export const CopyButton = (props: CopyButtonProps) => {
   };
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   const variantClass = `variant-${props.variant || 'outline'}`;
@@ -132,7 +132,7 @@ export const CopyButton = (props: CopyButtonProps) => {
 
   return (
     <button
-      class={['&-container', variantClass, props.class].join(' ').trim()}
+      class={[globalCssId, '&-container', variantClass, props.class].join(' ').trim()}
       ref={ref}
       css={props.style}
       type='button'

package/src/component-pool/date-picker/date-picker.tsx

@@ -211,7 +211,7 @@ export const DatePicker = (props: DatePickerProps) => {
   const globalCssId = getGlobalStylesId(datePickerCss);
   bindGlobalStyle(globalCssId, datePickerCss);
 
-  const ref: RefProps = { globalCssId };
+  const ref: RefProps = { referToCssId: globalCssId };
   let currentValue = props.value || '';
 
   const parseDate = (val: string) => {
@@ -241,7 +241,7 @@ export const DatePicker = (props: DatePickerProps) => {
     let isYearMenuOpen = false;
 
     const renderPanel = () => {
-      const panelRef: RefProps = { globalCssId };
+      const panelRef: RefProps = { referToCssId: globalCssId };
       const gridVar = new HtmlVar('');
 
       const refreshGrid = () => {
@@ -332,7 +332,7 @@ export const DatePicker = (props: DatePickerProps) => {
           );
         }
 
-        const ref2: RefProps = { globalCssId }; // used to replace the & in css
+        const ref2: RefProps = { referToCssId: globalCssId }; // used to replace the & in css
         return (
           <div class='&-grid' ref={ref2}>
             {daysNodes}
@@ -411,7 +411,7 @@ export const DatePicker = (props: DatePickerProps) => {
   };
 
   return (
-    <div class='&-container' css={{ ...datePickerCss, ...props.style }} ref={ref}>
+    <div class={[globalCssId, '&-container'].join(' ')} css={{ ...datePickerCss, ...props.style }} ref={ref}>
       <input
         class={['&-input', props.className || 'input-base'].join(' ')}
         placeholder={props.placeholder || 'Select date'}

package/src/component-pool/floating-icon-menu/floating-icon-menu.tsx

@@ -156,7 +156,7 @@ export const FloatingIconMenu = (props: FloatingIconMenuProps) => {
   bindGlobalStyle(globalCssId, css);
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   const toggleMenu = () => {
@@ -197,7 +197,8 @@ export const FloatingIconMenu = (props: FloatingIconMenuProps) => {
     labelPos = top !== undefined ? 'bottom' : 'top';
   }
 
-  const wrapperClass = ['floating-icon-menu', `dir-${direction}`, `label-pos-${labelPos}`, props.className]
+  // to avoid nest css, here need to add globalCssId as a class name
+  const wrapperClass = [globalCssId, 'floating-icon-menu', `dir-${direction}`, `label-pos-${labelPos}`, props.className]
     .filter(Boolean)
     .join(' ');
 

package/src/component-pool/map-wrapper/map-wrapper.tsx

@@ -45,12 +45,11 @@ export const MapWrapper = (props: MapWrapperProps) => {
   const zoom = props.zoom ?? 13;
 
   const buildSrc = (lat: number, lng: number, zoom: number) =>
-    `https://www.openstreetmap.org/export/embed.html?bbox=${lng - 0.05},${lat - 0.05},${lng + 0.05},${
-      lat + 0.05
+    `https://www.openstreetmap.org/export/embed.html?bbox=${lng - 0.05},${lat - 0.05},${lng + 0.05},${lat + 0.05
     }&layer=mapnik&marker=${lat},${lng}`;
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
     onLoad: async () => {
       const iframe = ref.$('.&-iframe') as HTMLIFrameElement;
       if (!iframe) return;
@@ -69,7 +68,7 @@ export const MapWrapper = (props: MapWrapperProps) => {
   const height = props.height || '300px';
 
   return (
-    <div class={['&-container', props.class].join(' ').trim()} ref={ref} css={{ width, height, ...props.style }}>
+    <div class={[globalCssId, '&-container', props.class].join(' ').trim()} ref={ref} css={{ width, height, ...props.style }}>
       <iframe
         class='&-iframe'
         src={buildSrc(lat, lng, zoom)}

package/src/component-pool/radial-progress/radial-progress.tsx

@@ -86,7 +86,7 @@ export const RadialProgress = (props: RadialProgressProps) => {
   }
 
   const containerRef: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   const progressColor = props.color || 'var(--primary-accent-color, #0a74c9)';
@@ -94,7 +94,7 @@ export const RadialProgress = (props: RadialProgressProps) => {
   const sizeClass = props.size || ButtonSize.Medium;
 
   return (
-    <div class={['&-container', sizeClass, props.class].join(' ').trim()} ref={containerRef} css={props.style}>
+    <div class={[globalCssId, '&-container', sizeClass, props.class].join(' ').trim()} ref={containerRef} css={props.style}>
       <SvgSvg class='&-svg' viewBox='0 0 100 100'>
         <SvgCircle class='&-track' cx='50' cy='50' r='45' style={{ stroke: trackColor }} />
         <SvgCircle

package/src/component-pool/range/gauge.tsx

@@ -291,7 +291,7 @@ export const Gauge = (props: GaugeProps) => {
   }
 
   const ref: RefProps & { onUnload?: (el: Element) => Promise<void> } = {
-    globalCssId,
+    referToCssId: globalCssId,
     onLoad: async () => {
       updateVisuals();
     },
@@ -341,7 +341,7 @@ export const Gauge = (props: GaugeProps) => {
 
   return (
     <div
-      class={['&-container', props.class, props.disabled ? 'disabled' : '', isReadonly ? 'readonly' : '']
+      class={[globalCssId, '&-container', props.class, props.disabled ? 'disabled' : '', isReadonly ? 'readonly' : '']
         .join(' ')
         .trim()}
       ref={ref}