lupine.components 1.1.51 → 1.1.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.51",
+  "version": "1.1.52",
   "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}

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

@@ -328,7 +328,7 @@ export const Range = (props: RangeProps) => {
   }
 
   const ref: RefProps & { onUnload?: (el: Element) => Promise<void> | void } = {
-    globalCssId,
+    referToCssId: globalCssId,
     onLoad: async () => {
       if (isVertical) {
         const wrapper = ref.$('.&-wrapper') as HTMLElement;
@@ -366,7 +366,7 @@ export const Range = (props: RangeProps) => {
 
   return (
     <div
-      class={['&-container', props.class, props.disabled ? 'disabled' : '', isVertical ? 'vertical' : 'horizontal']
+      class={[globalCssId, '&-container', props.class, props.disabled ? 'disabled' : '', isVertical ? 'vertical' : 'horizontal']
         .join(' ')
         .trim()}
       ref={ref}

package/src/component-pool/search-input/search-input.tsx

@@ -69,7 +69,7 @@ export const SearchInput = (props: InputWithClearProps) => {
   bindGlobalStyle(globalCssId, css);
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   const onSearch = () => {
@@ -97,7 +97,7 @@ export const SearchInput = (props: InputWithClearProps) => {
   }
 
   return (
-    <div ref={ref} class={['search-input', props.class].join(' ').trim()}>
+    <div ref={ref} class={[globalCssId, 'search-input', props.class].join(' ').trim()}>
       <input
         type='text'
         maxLength={30}

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

@@ -43,7 +43,7 @@ export const SkeletonCard = (props: SkeletonCardProps) => {
   const contentRef: RefProps = {};
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
     onLoad: async () => {
       const container = ref.current as HTMLElement;
 
@@ -106,7 +106,7 @@ export const SkeletonCard = (props: SkeletonCardProps) => {
 
   // Avatar size is fixed to 48px to represent a typical user profile
   return (
-    <div class={['&-container', props.class].join(' ').trim()} ref={ref} css={mergedStyle} aria-hidden='true'>
+    <div class={[globalCssId, '&-container', props.class].join(' ').trim()} ref={ref} css={mergedStyle} aria-hidden='true'>
       <Skeleton width='48px' height='48px' circle={true} animated={animated} />
       <div class='&-content' ref={contentRef}></div>
     </div>

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

@@ -34,7 +34,7 @@ export const Skeleton = (props: SkeletonProps) => {
   bindGlobalStyle(globalCssId, css);
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   const isAnimated = props.animated !== false; // defaults to true
@@ -50,7 +50,7 @@ export const Skeleton = (props: SkeletonProps) => {
 
   return (
     <div
-      class={['&-container', isAnimated ? 'is-animated' : '', isCircle ? 'is-circle' : '', props.class]
+      class={[globalCssId, '&-container', isAnimated ? 'is-animated' : '', isCircle ? 'is-circle' : '', props.class]
         .join(' ')
         .trim()}
       ref={ref}

package/src/component-pool/tag-input/tag-input.tsx

@@ -89,7 +89,7 @@ export const TagInput = ({
   bindGlobalStyle(globalCssId, tagInputCss);
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   let currentSelection = [...selectedIndices];
@@ -97,7 +97,7 @@ export const TagInput = ({
   const renderTags = () => {
     // pass globalCssId for & in classname
     const tempRef: RefProps = {
-      globalCssId,
+      referToCssId: globalCssId,
     };
     if (currentSelection.length === 0) {
       return (
@@ -158,13 +158,8 @@ export const TagInput = ({
   };
 
   const dom = new HtmlVar(renderTags());
-
-  // Combine native classes, framework namespace (from globalCssId), and optional extra classes
-  let finalClass = cls || '';
-  if (disabled) finalClass += ' disabled';
-
   return (
-    <div ref={ref} css={extraCss} class={finalClass} onClick={openSelector}>
+    <div ref={ref} css={extraCss} class={[globalCssId, cls, disabled ? 'disabled' : ''].filter(Boolean).join(' ')} onClick={openSelector}>
       {dom.node}
     </div>
   );

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

@@ -133,7 +133,7 @@ export const TimePicker = (props: TimePickerProps) => {
   const globalCssId = getGlobalStylesId(timePickerCss);
   bindGlobalStyle(globalCssId, timePickerCss);
 
-  const ref: RefProps = { globalCssId };
+  const ref: RefProps = { referToCssId: globalCssId };
   let currentValue = props.value || '';
 
   const parseValue = (val: string) => {
@@ -189,7 +189,7 @@ export const TimePicker = (props: TimePickerProps) => {
       const seconds = Array.from({ length: 60 }, (_, i) => i);
 
       const panelRef: RefProps = {
-        globalCssId,
+        referToCssId: globalCssId,
         onLoad: async () => {
           setTimeout(highlightSelection, 10);
         },
@@ -285,7 +285,7 @@ export const TimePicker = (props: TimePickerProps) => {
   };
 
   return (
-    <div class='&-container' css={props.style} ref={ref}>
+    <div class={[globalCssId, '&-container'].join(' ')} css={props.style} ref={ref}>
       <input
         class={['&-input', props.className || 'input-base'].join(' ')}
         placeholder={props.placeholder || 'Select time'}

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

@@ -96,7 +96,7 @@ export const Timeline = (props: TimelineProps) => {
   bindGlobalStyle(globalCssId, timelineCss);
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   const lineColor = props.lineColor || 'var(--secondary-border-color, #ccc)';
@@ -108,7 +108,7 @@ export const Timeline = (props: TimelineProps) => {
   };
 
   return (
-    <div class={['&-container', props.class].join(' ').trim()} ref={ref} css={containerStyle}>
+    <div class={[globalCssId, '&-container', props.class].join(' ').trim()} ref={ref} css={containerStyle}>
       <div class='&-line' style={{ backgroundColor: lineColor }}></div>
 
       {(props.items || []).map((item, index) => {

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

@@ -222,14 +222,14 @@ const TooltipContent = (props: {
   bindGlobalStyle(globalCssId, tooltipCss);
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
     onLoad: async () => {
       props.onRef(ref);
     },
   };
 
   return (
-    <div class={['&-container', props.position].join(' ')} ref={ref}>
+    <div class={[globalCssId, '&-container', props.position].join(' ')} ref={ref}>
       <div class='&-box'>
         {props.content}
         {props.showArrow && <div class='&-arrow' />}

package/src/components/meta-data.tsx

@@ -1,6 +1,5 @@
 // import { bindPageResetEvent } from '../core/page-reset-events';
-import { addMetaDataTags } from 'lupine.web';
-import { encodeHtml } from '../lib';
+import { addMetaDataTags, encodeHtml } from 'lupine.web';
 type NameMeta = { name: string; content: string };
 type PropertyMeta = { property: string; content: string };
 type HttpEquivMeta = { httpEquiv: string; content: string };

package/src/components/meta-description.tsx

@@ -1,7 +1,6 @@
 // import { bindPageResetEvent } from '../core/page-reset-events';
 
-import { addMetaDataTags } from 'lupine.web';
-import { encodeHtml } from '../lib';
+import { addMetaDataTags, encodeHtml } from 'lupine.web';
 
 export const MetaDescription = ({ children }: { children: string }) => {
   addMetaDataTags('name:description', `<meta name="description" content="${encodeHtml(children)}">`);

package/src/components/popup-menu.tsx

@@ -258,7 +258,7 @@ const ContentMenuContainer = (props: {
   bindGlobalStyle(globalCssId, contentMenuCss);
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
     onLoad: async () => {
       props.onRef(ref);
     },
@@ -307,7 +307,7 @@ const ContentMenuContainer = (props: {
   };
 
   return (
-    <div class='&-container' ref={ref}>
+    <div class={[globalCssId, '&-container'].join(' ')} ref={ref}>
       {props.list.map((item) => {
         if (item === '-' || item === '') return <div class='&-divider'></div>;
 
@@ -403,7 +403,7 @@ export const PopupMenu = ({
     },
   };
 
-  let ref: RefProps = { id: '' };
+  let ref: RefProps = {};
   let selectedValue = defaultValue;
 
   const openMenu = (event?: MouseEvent) => {

package/src/components/tabs.tsx

@@ -251,7 +251,7 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
   bindGlobalStyle(tabGlobalCssId, css);
 
   const ref: RefProps = {
-    globalCssId: tabGlobalCssId,
+    referToCssId: tabGlobalCssId,
   };
 
   // but we also want to create unique id for the current tab
@@ -264,7 +264,7 @@ export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: ref
     },
   };
   return (
-    <div ref={ref} css={cssTab} class={topClassName ? ' ' + topClassName : ''}>
+    <div ref={ref} css={cssTab} class={[tabGlobalCssId, topClassName].filter(Boolean).join(' ')}>
       <div class='&tabs tabs'>
         {pages.map((i, index) => {
           const className = index === newIndex ? ' active' : '';

package/src/demo/demo-render-page.tsx

@@ -76,6 +76,8 @@ export const DemoRenderPage = async (props: PageProps) => {
     borderRight: '1px solid var(--primary-border-color)',
     borderLeft: '1px solid var(--primary-border-color)',
     '>fragment>div': {
+      flex: 1,
+      alignSelf: 'stretch', // overwrite parent's align-items: center
       width: '100%',
       height: '100%',
     },

package/src/demo/mock/side-menu-mock.tsx

@@ -9,69 +9,66 @@ export type SideMenuMockProps = {
   onAction?: (action: string) => void;
 };
 
-const sideMenuMockCss: CssProps = {
-  '.msm-header': {
-    display: 'flex',
-    alignItems: 'center',
-    padding: '16px',
-    borderBottom: '1px solid var(--primary-border-color)',
-  },
-  '.msm-header-icon': {
-    marginRight: '12px',
-  },
-  '.msm-header-title': {
-    fontSize: '18px',
-    fontWeight: 'bold',
-    color: 'var(--primary-color)',
-  },
-  '.msm-content': {
-    flex: '1',
-    overflowY: 'auto',
-    padding: '12px 0',
-  },
-  '.msm-item': {
-    padding: '12px 0px',
-    fontSize: '16px',
-    cursor: 'pointer',
-    transition: 'background-color 0.2s',
-    display: 'flex',
-    alignItems: 'center',
-    gap: '12px',
-    '&:hover': {
-      backgroundColor: 'var(--activatable-bg-color-hover, rgba(0,0,0,0.04))',
-    },
-  },
-  '.msm-footer': {
-    borderTop: '1px solid var(--primary-border-color)',
-    padding: '16px 0',
-  },
-  '.msm-footer-cfg': {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  '.msm-footer-cfg .msm-item': {
-    padding: '12px',
-  },
-  '.msm-footer-version': {
-    textAlign: 'center',
-    fontSize: '12px',
-    color: 'var(--secondary-color, #999)',
-    marginTop: '16px',
-  },
-};
-
 export const SideMenuMock = ({
   menuItems = ['Home', 'Profile', 'Messages', 'Settings'],
   title = 'My App Menu',
   version = '1.0.0',
   onAction,
 }: SideMenuMockProps): VNode<any> => {
-  const globalCssId = getGlobalStylesId(sideMenuMockCss);
-  bindGlobalStyle(globalCssId, sideMenuMockCss);
-
-  const ref: RefProps = {
-    globalCssId,
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    height: '100%',
+    '.msm-header': {
+      display: 'flex',
+      alignItems: 'center',
+      padding: '16px',
+      borderBottom: '1px solid var(--primary-border-color)',
+    },
+    '.msm-header-icon': {
+      marginRight: '12px',
+    },
+    '.msm-header-title': {
+      fontSize: '18px',
+      fontWeight: 'bold',
+      color: 'var(--primary-color)',
+    },
+    '.msm-content': {
+      flex: '1',
+      overflowY: 'auto',
+      padding: '12px 0',
+    },
+    '.msm-item': {
+      padding: '12px 0px',
+      fontSize: '16px',
+      cursor: 'pointer',
+      transition: 'background-color 0.2s',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '12px',
+      '&:hover': {
+        backgroundColor: 'var(--activatable-bg-color-hover, rgba(0,0,0,0.04))',
+      },
+    },
+    '.msm-footer': {
+      borderTop: '1px solid var(--primary-border-color)',
+      padding: '16px 0',
+    },
+    '.msm-footer-cfg': {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    '.msm-footer-cfg .msm-item': {
+      padding: '12px',
+    },
+    '.msm-footer-version': {
+      textAlign: 'center',
+      fontSize: '12px',
+      color: 'var(--secondary-color, #999)',
+      marginTop: '16px',
+    },
   };
 
   const handleAction = (item: string) => {
@@ -84,7 +81,7 @@ export const SideMenuMock = ({
   };
 
   return (
-    <div ref={ref} style={{ display: 'flex', flexDirection: 'column', flex: 1, height: '100%' }}>
+    <div css={css}>
       <div class='msm-header'>
         <div class='msm-header-icon'><i class='ifc-icon ma-home-outline'></i></div>
         <div class='msm-header-title'>{title}</div>

package/src/lib/index.ts

@@ -14,7 +14,6 @@ export * from './download-link';
 export * from './download-stream';
 export * from './drag-util';
 export * from './dynamical-load';
-export * from './encode-html';
 export * from './find-parent-tag';
 export * from './format-bytes';
 export * from './lite-dom';

package/src/lib/encode-html.ts

@@ -1,25 +0,0 @@
-const htmlEscapes: Record<string, string> = {
-  '&': '&amp;',
-  '<': '&lt;',
-  '>': '&gt;',
-  "'": '&#39;',
-  '"': '&quot;',
-};
-
-export const encodeHtml = (str: any): string => {
-  if (str === null || str === undefined) return '';
-  return String(str).replace(/[&<>'"]/g, (tag) => htmlEscapes[tag]);
-};
-
-const htmlUnescapes: Record<string, string> = {
-  '&amp;': '&',
-  '&lt;': '<',
-  '&gt;': '>',
-  '&#39;': "'",
-  '&quot;': '"',
-};
-
-export const decodeHtml = (str: string): string => {
-  if (str === null || str === undefined) return '';
-  return String(str).replace(/&(?:amp|lt|gt|quot|#39);/g, (tag) => htmlUnescapes[tag]);
-};