@lumx/react 4.2.1-alpha.0 → 4.2.1-alpha.1

package/index.d.ts

@@ -1,4 +1,4 @@
-import { Kind as Kind$1, HorizontalAlignment, Size as Size$1, ColorPalette as ColorPalette$1, VerticalAlignment, Alignment, Orientation, AspectRatio, ColorWithVariants as ColorWithVariants$1, ColorVariant as ColorVariant$1, Typography as Typography$1, Emphasis as Emphasis$1, GlobalSize, TypographyInterface as TypographyInterface$1, Theme as Theme$1 } from '@lumx/core/js/constants';
+import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, Size as Size$1, ColorPalette as ColorPalette$1, Orientation as Orientation$1, Alignment as Alignment$1, AspectRatio, ColorWithVariants as ColorWithVariants$1, ColorVariant as ColorVariant$1, Typography as Typography$1, Emphasis as Emphasis$1, GlobalSize, TypographyInterface as TypographyInterface$1, Theme as Theme$1 } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 import * as _lumx_core_js_types from '@lumx/core/js/types';
 import { GenericProps as GenericProps$1, HasTheme as HasTheme$1, ValueOf, HasAriaDisabled as HasAriaDisabled$1, HasCloseMode, Falsy, HasClassName as HasClassName$1, HeadingElement as HeadingElement$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy } from '@lumx/core/js/types';
@@ -241,7 +241,7 @@ interface AutocompleteMultipleProps extends AutocompleteProps {
     /** Selected values. */
     values: any[];
     /** Alignment of the chips in the autocomplete. */
-    chipsAlignment?: HorizontalAlignment;
+    chipsAlignment?: HorizontalAlignment$1;
     /** Selected value render function. Default: Renders the value inside of a Chip. */
     selectedChipRender(choice: any, index: number, onClear?: (event: React.MouseEvent, val: any) => void, isDisabled?: boolean): ReactNode | string;
 }
@@ -318,6 +318,24 @@ interface BadgeWrapperProps extends GenericProps$1 {
 }
 declare const BadgeWrapper: Comp<BadgeWrapperProps, HTMLDivElement>;
 
+/**
+ * Alignments.
+ */
+declare const Alignment: {
+    readonly bottom: "bottom";
+    readonly center: "center";
+    readonly end: "end";
+    readonly left: "left";
+    readonly right: "right";
+    readonly spaceAround: "space-around";
+    readonly spaceBetween: "space-between";
+    readonly spaceEvenly: "space-evenly";
+    readonly start: "start";
+    readonly top: "top";
+};
+type Alignment = ValueOf<typeof Alignment>;
+type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
+type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
 declare const Theme: {
     readonly light: "light";
     readonly dark: "dark";
@@ -338,6 +356,11 @@ declare const Size: {
     readonly huge: "huge";
 };
 type Size = ValueOf<typeof Size>;
+declare const Orientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+type Orientation = ValueOf<typeof Orientation>;
 declare const Emphasis: {
     readonly low: "low";
     readonly medium: "medium";
@@ -726,7 +749,7 @@ interface ChipGroupProps extends GenericProps$1 {
      * Chip horizontal alignment.
      * @deprecated
      */
-    align?: HorizontalAlignment;
+    align?: HorizontalAlignment$1;
     /** List of Chip. */
     children: ReactNode;
 }
@@ -1203,18 +1226,17 @@ interface FlagProps extends Omit<FlagProps$1, 'children'> {
 declare const Flag: Comp<FlagProps, HTMLDivElement>;
 
 type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
-type GapSize = Extract<Size$1, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
+type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
 type SpaceAlignment = Extract<Alignment, 'space-between' | 'space-evenly' | 'space-around'>;
 type FlexVerticalAlignment = VerticalAlignment | SpaceAlignment;
 type FlexHorizontalAlignment = HorizontalAlignment | SpaceAlignment;
+
 /**
  * Defines the props of the component.
  */
-interface FlexBoxProps extends GenericProps$1 {
-    /** Customize the root element. */
-    as?: React.ElementType;
+interface FlexBoxProps$1 extends GenericProps {
     /** Children elements. */
-    children?: ReactNode;
+    children?: JSXElement;
     /** Whether the "content filling space" is enabled or not. */
     fillSpace?: boolean;
     /** Gap space between flexbox items. */
@@ -1232,6 +1254,14 @@ interface FlexBoxProps extends GenericProps$1 {
     /** Whether the "flex wrap" is enabled or not. */
     wrap?: boolean;
 }
+
+/**
+ * Defines the props of the component.
+ */
+interface FlexBoxProps extends FlexBoxProps$1 {
+    /** Customize the root element. */
+    as?: React__default.ElementType;
+}
 /**
  * FlexBox component.
  *
@@ -1426,13 +1456,13 @@ type GridGutterSize = Extract<Size$1, 'regular' | 'big' | 'huge'>;
  */
 interface GridProps extends GenericProps$1 {
     /** Orientation. */
-    orientation?: Orientation;
+    orientation?: Orientation$1;
     /** Whether the children are wrapped or not. */
     wrap?: string;
     /** Vertical alignment. */
-    vAlign?: Alignment;
+    vAlign?: Alignment$1;
     /** Horizontal alignment. */
-    hAlign?: Alignment;
+    hAlign?: Alignment$1;
     /** Gutter size. */
     gutter?: GridGutterSize;
     /** Children */
@@ -1453,7 +1483,7 @@ type Columns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11'
  */
 interface GridItemProps extends GenericProps$1 {
     /** Alignment. */
-    align?: Alignment;
+    align?: Alignment$1;
     /** Order. */
     order?: Columns;
     /** Width. */
@@ -1581,7 +1611,7 @@ type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
  */
 interface ThumbnailProps extends GenericProps$1, HasTheme$1 {
     /** Alignment of the thumbnail in it's parent (requires flex parent). */
-    align?: HorizontalAlignment;
+    align?: HorizontalAlignment$1;
     /** Image alternative text. */
     alt: string;
     /** Image aspect ratio. */
@@ -1669,7 +1699,7 @@ interface ImageBlockProps extends GenericProps$1, HasTheme$1, ImageCaptionMetada
     /** Action toolbar content. */
     actions?: ReactNode;
     /** Alignment. */
-    align?: HorizontalAlignment;
+    align?: HorizontalAlignment$1;
     /** Image alternative text. */
     alt: string;
     /** Caption position. */
@@ -2124,7 +2154,7 @@ declare const NavigationItem: (<E extends ElementType = "a">(props: React$1.Prop
 type NavigationProps = React.ComponentProps<'nav'> & HasClassName$1 & HasTheme$1 & {
     /** Content of the navigation. These components should be of type NavigationItem to be rendered */
     children?: React.ReactNode;
-    orientation?: Orientation;
+    orientation?: Orientation$1;
 } & HasAriaLabelOrLabelledBy;
 type SubComponents = {
     Section: typeof NavigationSection;
@@ -2189,7 +2219,7 @@ interface PostBlockProps extends GenericProps$1, HasTheme$1 {
     /** Metadata content. */
     meta?: ReactNode;
     /** Orientation. */
-    orientation?: Orientation;
+    orientation?: Orientation$1;
     /** Tag content. */
     tags?: ReactNode;
     /** Content (string, or sanitized html). */
@@ -2898,7 +2928,7 @@ interface SwitchProps extends GenericProps$1, HasTheme$1, HasAriaDisabled$1 {
     /** Native input name property. */
     name?: string;
     /** Position of the switch relative to the label. */
-    position?: Extract<Alignment, 'right' | 'left'>;
+    position?: Extract<Alignment$1, 'right' | 'left'>;
     /** Native input value property. */
     value?: string;
     /** On change callback. */
@@ -3071,7 +3101,7 @@ interface TabListProps extends GenericProps$1, HasTheme$1 {
     /** Layout of the tabs in the list. */
     layout?: TabListLayout;
     /** Position of the tabs in the list (requires 'clustered' layout). */
-    position?: Alignment;
+    position?: Alignment$1;
 }
 /**
  * TabList component.
@@ -3366,7 +3396,7 @@ interface UserBlockProps extends GenericProps$1, HasTheme$1 {
     /** Props to pass to the name block. */
     nameProps?: GenericProps$1;
     /** Orientation. */
-    orientation?: Orientation;
+    orientation?: Orientation$1;
     /** Simple action toolbar content. */
     simpleAction?: ReactNode;
     /** Size variant. */

package/index.js

@@ -1,4 +1,4 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio, ColorVariant, DIALOG_TRANSITION_DURATION, Orientation, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
+import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio, ColorVariant, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
@@ -717,6 +717,8 @@ const Size = {
   m: 'm',
   xl: 'xl',
   xxl: 'xxl'};
+const Orientation = {
+  horizontal: 'horizontal'};
 const Emphasis = {
   low: 'low',
   high: 'high'
@@ -6504,6 +6506,10 @@ Flag.displayName = COMPONENT_NAME$Y;
 Flag.className = CLASSNAME$Y;
 Flag.defaultProps = DEFAULT_PROPS$P;
 
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -6515,19 +6521,16 @@ const COMPONENT_NAME$X = 'FlexBox';
 const CLASSNAME$X = 'lumx-flex-box';
 const {
   block: block$O
-} = classNames.bem(CLASSNAME$X);
+} = bem(CLASSNAME$X);
 
 /**
- * FlexBox component.
+ * Get FlexBox component props (className computation).
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return Computed props with className.
  */
-const FlexBox = forwardRef((props, ref) => {
+function getFlexBoxProps(props) {
   const {
-    as: Component = 'div',
-    children,
     className,
     fillSpace,
     gap,
@@ -6540,10 +6543,9 @@ const FlexBox = forwardRef((props, ref) => {
     ...forwardedProps
   } = props;
   const adjustedOrientation = orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null);
-  return /*#__PURE__*/jsx(Component, {
-    ref: ref,
+  return {
     ...forwardedProps,
-    className: classNames.join(className, block$O({
+    className: classnames(className, block$O({
       [`orientation-${adjustedOrientation}`]: Boolean(adjustedOrientation),
       [`v-align-${vAlign}`]: Boolean(vAlign),
       [`h-align-${hAlign}`]: Boolean(hAlign),
@@ -6552,7 +6554,26 @@ const FlexBox = forwardRef((props, ref) => {
       'fill-space': fillSpace,
       'no-shrink': noShrink,
       ...Object.fromEntries(castArray(marginAuto).filter(Boolean).map(align => [`margin-auto-${align}`, true]))
-    })),
+    }))
+  };
+}
+
+/**
+ * FlexBox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const FlexBox = forwardRef((props, ref) => {
+  const {
+    as: Component = 'div',
+    children,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx(Component, {
+    ref: ref,
+    ...getFlexBoxProps(forwardedProps),
     children: children
   });
 });
@@ -6578,7 +6599,7 @@ const {
  */
 const DEFAULT_PROPS$O = {
   gap: Size$1.big,
-  orientation: Orientation.horizontal
+  orientation: Orientation$1.horizontal
 };
 const Figure = noop.bind({});
 const isFigure = isComponentType(Figure);
@@ -6640,7 +6661,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       children: [figure, sections.figureChildProps?.children]
     }), (sections.contentChildProps?.children || sections.otherChildren.length > 0) && /*#__PURE__*/jsxs(FlexBox, {
       ref: sections.contentChild?.ref,
-      orientation: Orientation.vertical,
+      orientation: Orientation$1.vertical,
       fillSpace: true,
       vAlign: forwardedProps.vAlign,
       hAlign: forwardedProps.hAlign,
@@ -6986,7 +7007,7 @@ const {
  * Component default props.
  */
 const DEFAULT_PROPS$L = {
-  orientation: Orientation.horizontal,
+  orientation: Orientation$1.horizontal,
   wrap: 'nowrap'
 };
 
@@ -8970,7 +8991,7 @@ Mosaic.className = CLASSNAME$E;
 Mosaic.defaultProps = DEFAULT_PROPS$D;
 
 const NavigationContext = /*#__PURE__*/createContext({
-  orientation: Orientation.vertical
+  orientation: Orientation$1.vertical
 });
 
 /**
@@ -9015,7 +9036,7 @@ const NavigationSection = forwardRef((props, ref) => {
     orientation
   } = useContext(NavigationContext) || {};
   const theme = useTheme();
-  const isDropdown = orientation === Orientation.horizontal;
+  const isDropdown = orientation === Orientation$1.horizontal;
   return /*#__PURE__*/jsxs("li", {
     className: classNames.join(className, sectionBlock(), itemBlock({
       [`theme-${theme}`]: Boolean(theme)
@@ -9065,7 +9086,7 @@ const NavigationSection = forwardRef((props, ref) => {
           id: sectionId,
           children: /*#__PURE__*/jsx(NavigationContext.Provider, {
             value: {
-              orientation: Orientation.vertical
+              orientation: Orientation$1.vertical
             },
             children: children
           })
@@ -9157,7 +9178,7 @@ const {
  * Component default props
  */
 const DEFAULT_PROPS$C = {
-  orientation: Orientation.vertical
+  orientation: Orientation$1.vertical
 };
 const Navigation = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
@@ -9404,7 +9425,7 @@ const {
  * Component default props.
  */
 const DEFAULT_PROPS$z = {
-  orientation: Orientation.horizontal
+  orientation: Orientation$1.horizontal
 };
 
 /**
@@ -14276,7 +14297,7 @@ const {
  * Component default props.
  */
 const DEFAULT_PROPS = {
-  orientation: Orientation.horizontal,
+  orientation: Orientation$1.horizontal,
   size: Size$1.m
 };
 
@@ -14313,10 +14334,10 @@ const UserBlock = forwardRef((props, ref) => {
   let componentSize = size;
 
   // Special case - When using vertical orientation force the size to be Sizes.l.
-  if (orientation === Orientation.vertical) {
+  if (orientation === Orientation$1.vertical) {
     componentSize = Size$1.l;
   }
-  const shouldDisplayActions = orientation === Orientation.vertical;
+  const shouldDisplayActions = orientation === Orientation$1.vertical;
   const isLink = Boolean(linkProps?.href || linkAs);
   const isClickable = !!onClick || isLink;
   const nameBlock = React__default.useMemo(() => {