@e1011/es-kit 1.0.175 → 1.0.176

package/dist/types/src/core/ui/components/container/CollapsibleContainer.d.ts

@@ -3,7 +3,7 @@ import { LayoutBoxProps } from './layoutBox.types';
 /**
  * Props for the CollapsibleContainer component.
  */
-export type CollapsibleContainerProps = PropsWithChildren & LayoutBoxProps & {
+export type CollapsibleContainerProps = PropsWithChildren & Omit<LayoutBoxProps, 'ref'> & {
     collapsed?: boolean;
     collapseHandler?: (collapsed: boolean) => void;
     children?: ReactNode;

package/dist/types/src/core/ui/components/container/CollapsibleContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleContainer.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0B,SAAS,EACP,aAAa,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAKtF,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAWlD;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,GAAG,cAAc,GAAG;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,GAAG,aAAa,CAAA;AAEjB;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA0D7D,CAAA"}
+{"version":3,"file":"CollapsibleContainer.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0B,SAAS,EACP,aAAa,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAKtF,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAWlD;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,GAAG;IACxF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,GAAG,aAAa,CAAA;AAEjB;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA0D7D,CAAA"}

package/dist/types/src/core/ui/components/container/layoutBox.types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, PropsWithChildren, Ref } from 'react';
+import { CSSProperties, LegacyRef, PropsWithChildren } from 'react';
 /**
  * Enum representing the possible layout directions.
  */
@@ -59,7 +59,7 @@ export type LayoutBoxProps = PropsWithChildren & {
     /** Tab index for keyboard navigation. */
     tabIndex?: number;
     /** Ref for accessing the underlying DOM element. */
-    ref?: Ref<HTMLDivElement> | undefined;
+    ref?: LegacyRef<HTMLDivElement> | undefined | null;
     /** Callback function for click event. */
     onClick?: () => void;
     /** If true, sets the layout direction to column. */

package/dist/types/src/core/ui/components/container/layoutBox.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layoutBox.types.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/layoutBox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAE7D;;GAEG;AACH,oBAAY,eAAe;IACzB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,iBAAiB,GAAG;IAC/C,2CAA2C;IAC3C,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,qCAAqC;IACrC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;IACvC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;IACpC,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;IACtC,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oDAAoD;IACpD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,GAAG,SAAS,CAAA;IACrC,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,GAAG,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC"}
+{"version":3,"file":"layoutBox.types.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/layoutBox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAEnE;;GAEG;AACH,oBAAY,eAAe;IACzB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,iBAAiB,GAAG;IAC/C,2CAA2C;IAC3C,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,qCAAqC;IACrC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;IACvC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;IACpC,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;IACtC,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oDAAoD;IACpD,GAAG,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,IAAI,CAAA;IAClD,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,GAAG,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC"}

package/dist/types/src/core/ui/components/molecules/index.d.ts

@@ -0,0 +1,2 @@
+export * from './layouts';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/core/ui/components/molecules/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/dist/types/src/core/ui/components/molecules/layouts/FlowLayout.d.ts

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import type { FlowLayoutProps } from './flowLayout.types';
+/**
+ * Renders a flexible flow layout that automatically arranges child components based on specified columns and spacing.
+ * This component is highly customizable through its props,
+ * allowing for dynamic layouts responsive to the content and screen size.
+ *
+ * Utilizes a grid layout by default, falling back to flex layout
+ * if `numColumns` is not greater than 0. Each item's width
+ * and placement can be controlled via `spanColumn` on
+ * individual items, with additional layout props provided for fine-tuning.
+ *
+ * @param {FlowLayoutProps} props The properties to configure the FlowLayout.
+ * @param {ItemDTOType[]} props.itemDTOs Array of item DTOs defining the
+ * components to render and their layout properties.
+ * @param {Partial<LayoutBoxProps>} [props.containerProps={}] Optional.
+ * Props to be spread onto the container `LayoutBox`, allowing for custom styles and behaviors.
+ * @param {Partial<LayoutBoxProps>} [props.defaultItemLayoutProps={}] Optional.
+ * Default layout properties applied to each item, unless overridden by item-specific props.
+ * @param {number} [props.numColumns=1] Optional.
+ *  Defines the number of columns in the grid. Affects item distribution and layout.
+ * @param {string} [props.className=''] Optional.
+ * Additional CSS class names to apply to the layout container for custom styling.
+ * @param {ReactNode} [props.beforeContent] Optional.
+ * Content to render before the main items. Useful for titles, descriptions, or custom components.
+ * @param {ReactNode} [props.afterContent] Optional.
+ Content to render after the main items. Can be used for additional information or actions related to the items.
+ * @returns {React.ReactElement} The rendered FlowLayout component.
+ */
+export declare const FlowLayout: FC<FlowLayoutProps>;
+export type FlowLayoutType = typeof FlowLayout;
+//# sourceMappingURL=FlowLayout.d.ts.map

package/dist/types/src/core/ui/components/molecules/layouts/FlowLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowLayout.d.ts","sourceRoot":"","sources":["../../../../../../../../src/core/ui/components/molecules/layouts/FlowLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,EAAE,EAAW,MAAM,OAAO,CAAA;AAKzC,OAAO,KAAK,EAAE,eAAe,EAAe,MAAM,oBAAoB,CAAA;AAItE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA8DzC,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,OAAO,UAAU,CAAC"}

package/dist/types/src/core/ui/components/molecules/layouts/flowLayout.types.d.ts

@@ -0,0 +1,42 @@
+import { ComponentType, FC, ReactNode } from 'react';
+import { CommonProps } from '../../../types/CommonProps';
+import { LayoutBoxProps } from '../../container/layoutBox.types';
+/**
+ * Defines the structure for item data transfer objects (DTO) used within a flow layout.
+ * It extends `LayoutBoxProps` and `CommonProps` for layout and common property support,
+ * allowing additional custom properties as needed.
+ *
+ * @property {number} [spanColumn] Optional. Specifies how many columns the item should span in the layout.
+ * @property {ComponentType | FC<unknown>} Component The component to be rendered for this item.
+ * @property {Partial<LayoutBoxProps>} [layoutProps] Optional. Additional layout properties to be applied to this item.
+ */
+export type ItemDTOType = LayoutBoxProps & CommonProps & {
+    spanColumn?: number;
+    Component: ComponentType | FC<unknown>;
+    layoutProps?: Partial<LayoutBoxProps>;
+    [key: string]: any;
+};
+/**
+ * Props for the `FlowLayout` component, which arranges its child components according to the given layout properties.
+ * It supports a flexible number of columns and allows for custom content before and after the main content.
+ *
+ * @property {ItemDTOType[]} itemDTOs An array of `ItemDTOType`
+ * objects representing the items to be rendered in the layout.
+ * @property {Partial<LayoutBoxProps>} [containerProps] Optional.
+ * Additional properties to be applied to the layout container.
+ * @property {Partial<LayoutBoxProps>} [defaultItemLayoutProps] Optional.
+ * Default layout properties to be applied to each item unless overridden.
+ * @property {number} [numColumns] Optional.
+ * The number of columns in the layout. This affects how items are distributed horizontally.
+ * @property {ReactNode} [beforeContent] Optional. Custom content to be rendered before the main content.
+ * @property {ReactNode} [afterContent] Optional. Custom content to be rendered after the main content.
+ */
+export type FlowLayoutProps = LayoutBoxProps & CommonProps & {
+    itemDTOs: ItemDTOType[];
+    containerProps?: Partial<LayoutBoxProps>;
+    defaultItemLayoutProps?: Partial<LayoutBoxProps>;
+    numColumns?: number;
+    beforeContent?: ReactNode;
+    afterContent?: ReactNode;
+};
+//# sourceMappingURL=flowLayout.types.d.ts.map

package/dist/types/src/core/ui/components/molecules/layouts/flowLayout.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flowLayout.types.d.ts","sourceRoot":"","sources":["../../../../../../../../src/core/ui/components/molecules/layouts/flowLayout.types.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAGhE;;;;;;;;GAQG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,GAAG,WAAW,GAAG;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,aAAa,GAAG,EAAE,CAAC,OAAO,CAAC,CAAA;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;IACrC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,WAAW,GAAG;IAC3D,QAAQ,EAAE,WAAW,EAAE,CAAA;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;IACxC,sBAAsB,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;IAChD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB,CAAC"}

package/dist/types/src/core/ui/components/molecules/layouts/index.d.ts

@@ -0,0 +1,3 @@
+export * from './FlowLayout';
+export * from './flowLayout.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/core/ui/components/molecules/layouts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/core/ui/components/molecules/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA"}

package/dist/types/src/core/ui/types/CommonProps.d.ts

@@ -0,0 +1,11 @@
+import { Ref, RefObject } from 'react';
+export type CommonProps = {
+    id?: string;
+    'data-testid'?: string;
+    dataTestId?: string;
+    className?: string;
+};
+export type ForwardedRefContainer = {
+    forwardedRef?: RefObject<HTMLDivElement> | Ref<HTMLDivElement> | null;
+};
+//# sourceMappingURL=CommonProps.d.ts.map

package/dist/types/src/core/ui/types/CommonProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommonProps.d.ts","sourceRoot":"","sources":["../../../../../../src/core/ui/types/CommonProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAGD,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,GAAG,CAAC,cAAc,CAAC,GAAG,IAAI,CAAA;CACtE,CAAA"}

package/dist/ui/esm/src/core/ui/components/container/CollapsibleContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleContainer.js","sources":["../../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode,\n  useEffect, useLayoutEffect, useMemo, CSSProperties, PropsWithChildren } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport classes from './CollapsibleContainer.module.scss'\nimport { LayoutBoxProps } from './layoutBox.types'\n\n\n/**\n * Mapping of element property names for calculating dimensions.\n */\nconst elementPropNameMap: Record<string, string> = {\n  width: 'scrollWidth',\n  height: 'scrollHeight',\n}\n\n/**\n * Props for the CollapsibleContainer component.\n */\nexport type CollapsibleContainerProps = PropsWithChildren & LayoutBoxProps & {\n  collapsed?: boolean\n  collapseHandler?: (collapsed: boolean) => void\n  children?: ReactNode\n  className?: string\n  horizontal?: boolean\n} & CSSProperties\n\n/**\n * CollapsibleContainer component.\n *\n * @type {React.FC<CollapsibleContainerProps>}\n * @returns {React.ReactElement} The CollapsibleContainer.\n */\nexport const CollapsibleContainer: FC<CollapsibleContainerProps> = memo(({\n  collapsed = false, collapseHandler, children, horizontal = false, className = '', id, ...props\n}: CollapsibleContainerProps) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [contentProp, setContentProp] = useState(0)\n\n  const { dataProps, restProps: style } = useParseProps(props)\n\n  const vertical = !horizontal\n\n  useEffect(() => {\n    collapseHandler?.(collapsed)\n  }, [collapseHandler, collapsed])\n\n  useLayoutEffect(() => {\n    if (containerRef?.current) {\n      const propName = vertical ? 'height' : 'width'\n\n      // TODO test with requestAnimationFrame\n      setTimeout(() => {\n        if (containerRef?.current) {\n          setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n        }\n      }, 100)\n    }\n  }, [containerRef, vertical])\n\n  const styleProps: CSSProperties = useMemo(() => ({\n    '--prop-name': vertical ? 'height' : 'width',\n    '--prop-max-name': vertical ? 'max-height' : 'max-width',\n    '--prop-value': `${contentProp}px`,\n    ...style,\n  } as CSSProperties), [vertical, style, contentProp])\n\n  const classNames = useMemo(() => {\n    const classNames = [vertical ? classes.vertical : classes.horizontal]\n\n    if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.collapsed)\n    }\n    if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.expanded)\n    }\n    return classNames.join(' ')\n  }, [collapsed, contentProp, vertical])\n\n  return (\n    <div\n      id={`${(typeof id !== 'undefined' && id) || id}`}\n      className={`${classes['collapsible-container']} ${classNames} ${className} `}\n      ref={containerRef}\n      style={styleProps}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n    >\n      {children}\n    </div>\n  )\n})\n\nCollapsibleContainer.displayName = 'CollapsibleContainer'\n"],"names":["elementPropNameMap","width","height","CollapsibleContainer","memo","_ref","collapsed","collapseHandler","children","horizontal","className","id","props","containerRef","useRef","contentProp","setContentProp","useState","dataProps","restProps","style","useParseProps","vertical","useEffect","useLayoutEffect","current","propName","setTimeout","styleProps","useMemo","concat","classNames","classes","push","expanded","join","React","createElement","_extends","ref","dataTestId","displayName"],"mappings":"gYAYA,MAAMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAoBGC,EAAsDC,GAAKC,IAEvC,IAFwCC,UACvEA,GAAY,EAAKC,gBAAEA,EAAeC,SAAEA,EAAQC,WAAEA,GAAa,EAAKC,UAAEA,EAAY,GAAEC,GAAEA,KAAOC,GAC/DP,EAC1B,MAAMQ,EAAeC,EAAuB,OACrCC,EAAaC,GAAkBC,EAAS,IAEzCC,UAAEA,EAAWC,UAAWC,GAAUC,EAAcT,GAEhDU,GAAYb,EAElBc,GAAU,KACRhB,SAAAA,EAAkBD,EAAU,GAC3B,CAACC,EAAiBD,IAErBkB,GAAgB,KACd,GAAIX,SAAAA,EAAcY,QAAS,CACzB,MAAMC,EAAWJ,EAAW,SAAW,QAGvCK,YAAW,KACLd,SAAAA,EAAcY,SAChBT,EAAgBH,EAAaY,QAAgBzB,EAAmB0B,IAClE,GACC,IACL,IACC,CAACb,EAAcS,IAElB,MAAMM,EAA4BC,GAAQ,KAAO,CAC/C,cAAeP,EAAW,SAAW,QACrC,kBAAmBA,EAAW,aAAe,YAC7C,eAAcQ,GAAAA,OAAKf,EAAe,SAC/BK,KACgB,CAACE,EAAUF,EAAOL,IAEjCgB,EAAaF,GAAQ,KACzB,MAAME,EAAa,CAACT,EAAWU,EAAQV,SAAWU,EAAQvB,YAQ1D,OANIH,GAAaS,GAAbT,MAA4BS,GAC9BgB,EAAWE,KAAKD,EAAQ1B,YAErBA,GAAaS,GAAd,MAA6BA,GAC/BgB,EAAWE,KAAKD,EAAQE,UAEnBH,EAAWI,KAAK,IAAI,GAC1B,CAAC7B,EAAWS,EAAaO,IAE5B,OACEc,MAAAC,cAAA,MAAAC,EAAA,CACE3B,GAAE,GAAAmB,YAAoB,IAAPnB,GAAsBA,GAAOA,GAC5CD,UAASoB,GAAAA,OAAKE,EAAQ,yBAAwBF,KAAAA,OAAIC,EAAU,KAAAD,OAAIpB,EAAa,KAC7E6B,IAAK1B,EACLO,MAAOQ,GACHV,EAAS,CACb,cAAaA,EAAUsB,YAActB,EAAU,gBAAkBP,IAEhEH,EACG,IAIVL,EAAqBsC,YAAc"}
+{"version":3,"file":"CollapsibleContainer.js","sources":["../../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode,\n  useEffect, useLayoutEffect, useMemo, CSSProperties, PropsWithChildren } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport classes from './CollapsibleContainer.module.scss'\nimport { LayoutBoxProps } from './layoutBox.types'\n\n\n/**\n * Mapping of element property names for calculating dimensions.\n */\nconst elementPropNameMap: Record<string, string> = {\n  width: 'scrollWidth',\n  height: 'scrollHeight',\n}\n\n/**\n * Props for the CollapsibleContainer component.\n */\nexport type CollapsibleContainerProps = PropsWithChildren & Omit<LayoutBoxProps, 'ref'> & {\n  collapsed?: boolean\n  collapseHandler?: (collapsed: boolean) => void\n  children?: ReactNode\n  className?: string\n  horizontal?: boolean\n} & CSSProperties\n\n/**\n * CollapsibleContainer component.\n *\n * @type {React.FC<CollapsibleContainerProps>}\n * @returns {React.ReactElement} The CollapsibleContainer.\n */\nexport const CollapsibleContainer: FC<CollapsibleContainerProps> = memo(({\n  collapsed = false, collapseHandler, children, horizontal = false, className = '', id, ...props\n}: CollapsibleContainerProps) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [contentProp, setContentProp] = useState(0)\n\n  const { dataProps, restProps: style } = useParseProps(props)\n\n  const vertical = !horizontal\n\n  useEffect(() => {\n    collapseHandler?.(collapsed)\n  }, [collapseHandler, collapsed])\n\n  useLayoutEffect(() => {\n    if (containerRef?.current) {\n      const propName = vertical ? 'height' : 'width'\n\n      // TODO test with requestAnimationFrame\n      setTimeout(() => {\n        if (containerRef?.current) {\n          setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n        }\n      }, 100)\n    }\n  }, [containerRef, vertical])\n\n  const styleProps: CSSProperties = useMemo(() => ({\n    '--prop-name': vertical ? 'height' : 'width',\n    '--prop-max-name': vertical ? 'max-height' : 'max-width',\n    '--prop-value': `${contentProp}px`,\n    ...style,\n  } as CSSProperties), [vertical, style, contentProp])\n\n  const classNames = useMemo(() => {\n    const classNames = [vertical ? classes.vertical : classes.horizontal]\n\n    if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.collapsed)\n    }\n    if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.expanded)\n    }\n    return classNames.join(' ')\n  }, [collapsed, contentProp, vertical])\n\n  return (\n    <div\n      id={`${(typeof id !== 'undefined' && id) || id}`}\n      className={`${classes['collapsible-container']} ${classNames} ${className} `}\n      ref={containerRef}\n      style={styleProps}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n    >\n      {children}\n    </div>\n  )\n})\n\nCollapsibleContainer.displayName = 'CollapsibleContainer'\n"],"names":["elementPropNameMap","width","height","CollapsibleContainer","memo","_ref","collapsed","collapseHandler","children","horizontal","className","id","props","containerRef","useRef","contentProp","setContentProp","useState","dataProps","restProps","style","useParseProps","vertical","useEffect","useLayoutEffect","current","propName","setTimeout","styleProps","useMemo","concat","classNames","classes","push","expanded","join","React","createElement","_extends","ref","dataTestId","displayName"],"mappings":"gYAYA,MAAMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAoBGC,EAAsDC,GAAKC,IAEvC,IAFwCC,UACvEA,GAAY,EAAKC,gBAAEA,EAAeC,SAAEA,EAAQC,WAAEA,GAAa,EAAKC,UAAEA,EAAY,GAAEC,GAAEA,KAAOC,GAC/DP,EAC1B,MAAMQ,EAAeC,EAAuB,OACrCC,EAAaC,GAAkBC,EAAS,IAEzCC,UAAEA,EAAWC,UAAWC,GAAUC,EAAcT,GAEhDU,GAAYb,EAElBc,GAAU,KACRhB,SAAAA,EAAkBD,EAAU,GAC3B,CAACC,EAAiBD,IAErBkB,GAAgB,KACd,GAAIX,SAAAA,EAAcY,QAAS,CACzB,MAAMC,EAAWJ,EAAW,SAAW,QAGvCK,YAAW,KACLd,SAAAA,EAAcY,SAChBT,EAAgBH,EAAaY,QAAgBzB,EAAmB0B,IAClE,GACC,IACL,IACC,CAACb,EAAcS,IAElB,MAAMM,EAA4BC,GAAQ,KAAO,CAC/C,cAAeP,EAAW,SAAW,QACrC,kBAAmBA,EAAW,aAAe,YAC7C,eAAcQ,GAAAA,OAAKf,EAAe,SAC/BK,KACgB,CAACE,EAAUF,EAAOL,IAEjCgB,EAAaF,GAAQ,KACzB,MAAME,EAAa,CAACT,EAAWU,EAAQV,SAAWU,EAAQvB,YAQ1D,OANIH,GAAaS,GAAbT,MAA4BS,GAC9BgB,EAAWE,KAAKD,EAAQ1B,YAErBA,GAAaS,GAAd,MAA6BA,GAC/BgB,EAAWE,KAAKD,EAAQE,UAEnBH,EAAWI,KAAK,IAAI,GAC1B,CAAC7B,EAAWS,EAAaO,IAE5B,OACEc,MAAAC,cAAA,MAAAC,EAAA,CACE3B,GAAE,GAAAmB,YAAoB,IAAPnB,GAAsBA,GAAOA,GAC5CD,UAASoB,GAAAA,OAAKE,EAAQ,yBAAwBF,KAAAA,OAAIC,EAAU,KAAAD,OAAIpB,EAAa,KAC7E6B,IAAK1B,EACLO,MAAOQ,GACHV,EAAS,CACb,cAAaA,EAAUsB,YAActB,EAAU,gBAAkBP,IAEhEH,EACG,IAIVL,EAAqBsC,YAAc"}

package/dist/ui/esm/src/core/ui/components/container/LayoutBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\nimport classes from './layoutBox.module.scss'\n\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n  start: 'flex-start',\n  'flex-start': 'flex-start',\n  end: 'flex-end',\n  'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n  id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined) => {\n  const { dataProps, restProps } = useParseProps(props)\n\n  /**\n   * Memoized onClick event properties.\n   * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n   */\n  const onClickProps = useMemo(() => (onClick ? ({\n    onClick,\n    onKeyDown: onClick,\n    role: 'button',\n    tabIndex: -1,\n  }) : {}), [onClick])\n\n  /**\n   * Memoized resolved direction based on the column prop.\n   * @type {LayoutDirection}\n   */\n  const resolvedColumn = useMemo(() => ((\n    column !== undefined && column === true)\n    ? LayoutDirection.COLUMN\n    : null), [column])\n\n  /**\n   * Memoized styles combining parsed props and additional styles.\n   * @type {CSSProperties}\n   */\n  const styles = useMemo(() => (\n    {\n      ...restProps,\n      ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n      ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n      ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n      ...style,\n    }\n  ), [resolvedColumn, restProps, style])\n\n  return (\n    <div\n      {...(id ? { id: `${id}` } : {})}\n      ref={ref}\n      tabIndex={tabIndex}\n      className={`${(classes as any)['layout-box']} ${className}`}\n      style={styles as CSSProperties}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n      {...onClickProps}\n    >\n      {children}\n    </div>\n  )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/**\n * Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","onClick","column","props","dataProps","restProps","useParseProps","onClickProps","useMemo","onKeyDown","role","resolvedColumn","undefined","LayoutDirection","COLUMN","styles","align","alignItems","justify","justifyContent","direction","flexDirection","React","createElement","_extends","concat","classes","dataTestId","displayName","LayoutBox","memo"],"mappings":"0SAYA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,GAAW,CAAAC,EAEtBC,KAA+C,IAFxBC,GACxCA,EAAEC,MAAEA,EAAKC,SAAEA,EAAQC,SAAEA,EAAQC,UAAEA,EAAY,GAAEC,QAAEA,EAAOC,OAAEA,KAAWC,GACpDT,EACf,MAAMU,UAAEA,EAASC,UAAEA,GAAcC,EAAcH,GAMzCI,EAAeC,GAAQ,IAAOP,EAAW,CAC7CA,UACAQ,UAAWR,EACXS,KAAM,SACNX,UAAW,GACR,CAAG,GAAE,CAACE,IAMLU,EAAiBH,GAAQ,SAClBI,IAAXV,IAAmC,IAAXA,EACtBW,EAAgBC,OAChB,MAAO,CAACZ,IAMNa,EAASP,GAAQ,KACrB,IACKH,KACCA,EAAUW,MAAQ,CAAEC,WAAY3B,EAAiBe,EAAUW,QAAqB,MAChFX,EAAUa,QAAU,CAAEC,eAAgB7B,EAAiBe,EAAUa,UAAuB,MACxFb,EAAUe,WAAaT,EAAiB,CAAEU,cAAehB,EAAUe,WAAaT,GAAmB,MACpGd,KAEJ,CAACc,EAAgBN,EAAWR,IAE/B,OACEyB,MAAAC,oBAAAC,EAAA,CAAA,EACO5B,EAAK,CAAEA,GAAE,GAAA6B,OAAK7B,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAS,GAAAyB,OAAMC,EAAgB,cAAaD,KAAAA,OAAIzB,GAChDH,MAAOkB,GACHX,EAAS,CACb,cAAaA,EAAUuB,YAAcvB,EAAU,gBAAkBR,GAC7DW,GAEHT,EACG,IAIVN,EAAsBoC,YAAc,8BAMvBC,EAAgCC,EAAqBtC,GAElEqC,EAAUD,YAAc"}
+{"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\nimport classes from './layoutBox.module.scss'\n\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n  start: 'flex-start',\n  'flex-start': 'flex-start',\n  end: 'flex-end',\n  'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n  id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined | null) => {\n  const { dataProps, restProps } = useParseProps(props)\n\n  /**\n   * Memoized onClick event properties.\n   * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n   */\n  const onClickProps = useMemo(() => (onClick ? ({\n    onClick,\n    onKeyDown: onClick,\n    role: 'button',\n    tabIndex: -1,\n  }) : {}), [onClick])\n\n  /**\n   * Memoized resolved direction based on the column prop.\n   * @type {LayoutDirection}\n   */\n  const resolvedColumn = useMemo(() => ((\n    column !== undefined && column === true)\n    ? LayoutDirection.COLUMN\n    : null), [column])\n\n  /**\n   * Memoized styles combining parsed props and additional styles.\n   * @type {CSSProperties}\n   */\n  const styles = useMemo(() => (\n    {\n      ...restProps,\n      ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n      ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n      ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n      ...style,\n    }\n  ), [resolvedColumn, restProps, style])\n\n  return (\n    <div\n      {...(id ? { id: `${id}` } : {})}\n      ref={ref}\n      tabIndex={tabIndex}\n      className={`${(classes as any)['layout-box']} ${className}`}\n      style={styles as CSSProperties}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n      {...onClickProps}\n    >\n      {children}\n    </div>\n  )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/**\n * Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","onClick","column","props","dataProps","restProps","useParseProps","onClickProps","useMemo","onKeyDown","role","resolvedColumn","undefined","LayoutDirection","COLUMN","styles","align","alignItems","justify","justifyContent","direction","flexDirection","React","createElement","_extends","concat","classes","dataTestId","displayName","LayoutBox","memo"],"mappings":"0SAYA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,GAAW,CAAAC,EAEtBC,KAAsD,IAF/BC,GACxCA,EAAEC,MAAEA,EAAKC,SAAEA,EAAQC,SAAEA,EAAQC,UAAEA,EAAY,GAAEC,QAAEA,EAAOC,OAAEA,KAAWC,GACpDT,EACf,MAAMU,UAAEA,EAASC,UAAEA,GAAcC,EAAcH,GAMzCI,EAAeC,GAAQ,IAAOP,EAAW,CAC7CA,UACAQ,UAAWR,EACXS,KAAM,SACNX,UAAW,GACR,CAAG,GAAE,CAACE,IAMLU,EAAiBH,GAAQ,SAClBI,IAAXV,IAAmC,IAAXA,EACtBW,EAAgBC,OAChB,MAAO,CAACZ,IAMNa,EAASP,GAAQ,KACrB,IACKH,KACCA,EAAUW,MAAQ,CAAEC,WAAY3B,EAAiBe,EAAUW,QAAqB,MAChFX,EAAUa,QAAU,CAAEC,eAAgB7B,EAAiBe,EAAUa,UAAuB,MACxFb,EAAUe,WAAaT,EAAiB,CAAEU,cAAehB,EAAUe,WAAaT,GAAmB,MACpGd,KAEJ,CAACc,EAAgBN,EAAWR,IAE/B,OACEyB,MAAAC,oBAAAC,EAAA,CAAA,EACO5B,EAAK,CAAEA,GAAE,GAAA6B,OAAK7B,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAS,GAAAyB,OAAMC,EAAgB,cAAaD,KAAAA,OAAIzB,GAChDH,MAAOkB,GACHX,EAAS,CACb,cAAaA,EAAUuB,YAAcvB,EAAU,gBAAkBR,GAC7DW,GAEHT,EACG,IAIVN,EAAsBoC,YAAc,8BAMvBC,EAAgCC,EAAqBtC,GAElEqC,EAAUD,YAAc"}

package/dist/ui/esm/src/core/ui/components/container/layoutBox.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"layoutBox.types.js","sources":["../../../../../../../../src/core/ui/components/container/layoutBox.types.ts"],"sourcesContent":["import { CSSProperties, PropsWithChildren, Ref } from 'react'\n\n/**\n * Enum representing the possible layout directions.\n */\nexport enum LayoutDirection {\n  ROW = 'row',\n  COLUMN = 'column',\n}\n\n/**\n * Props for the LayoutBox component.\n */\nexport type LayoutBoxProps = PropsWithChildren & {\n  /** Unique identifier for the component. */\n  id?: string | number\n  /** CSS flex property. */\n  flex?: string\n  /** CSS flexGrow property. */\n  flexGrow?: string | number\n  /** Text alignment within the box. */\n  alignText?: 'center' | 'right' | 'left'\n  /** Direction of the layout (row or column). */\n  direction?: LayoutDirection | string\n  /** CSS flexShrink property. */\n  flexShrink?: string | number\n  /** CSS flexBasis property. */\n  flexBasis?: string\n  /** CSS flexWrap property. */\n  flexWrap?: string\n  /** CSS justify-content property. */\n  justify?: string\n  /** CSS align-items property. */\n  align?: string\n  /** CSS align-self property. */\n  alignSelf?: string\n  /** CSS margin property. */\n  margin?: string\n  /** CSS padding property. */\n  padding?: string\n  /** CSS width property. */\n  width?: string\n  /** CSS height property. */\n  height?: string\n  /** CSS maxWidth property. */\n  maxWidth?: string\n  /** CSS maxHeight property. */\n  maxHeight?: string\n  /** CSS minWidth property. */\n  minWidth?: string\n  /** CSS minHeight property. */\n  minHeight?: string\n  /** Gap between child elements. */\n  gap?: string\n  /** CSS borderRadius property. */\n  borderRadius?: string\n  /** Additional inline styles for the component. */\n  style?: Record<string, unknown> | null\n  /** Additional class name(s) for the component. */\n  className?: string\n  /** Tab index for keyboard navigation. */\n  tabIndex?: number\n  /** Ref for accessing the underlying DOM element. */\n  ref?: Ref<HTMLDivElement> | undefined\n  /** Callback function for click event. */\n  onClick?: () => void\n  /** If true, sets the layout direction to column. */\n  column?: boolean\n} & Omit<CSSProperties, 'direction'>;\n"],"names":["LayoutDirection"],"mappings":"AAKYA,IAAAA,WAAAA,GAAe,OAAfA,EAAe,IAAA,MAAfA,EAAe,OAAA,SAAfA,CAAe,EAAA"}
+{"version":3,"file":"layoutBox.types.js","sources":["../../../../../../../../src/core/ui/components/container/layoutBox.types.ts"],"sourcesContent":["import { CSSProperties, LegacyRef, PropsWithChildren } from 'react'\n\n/**\n * Enum representing the possible layout directions.\n */\nexport enum LayoutDirection {\n  ROW = 'row',\n  COLUMN = 'column',\n}\n\n/**\n * Props for the LayoutBox component.\n */\nexport type LayoutBoxProps = PropsWithChildren & {\n  /** Unique identifier for the component. */\n  id?: string | number\n  /** CSS flex property. */\n  flex?: string\n  /** CSS flexGrow property. */\n  flexGrow?: string | number\n  /** Text alignment within the box. */\n  alignText?: 'center' | 'right' | 'left'\n  /** Direction of the layout (row or column). */\n  direction?: LayoutDirection | string\n  /** CSS flexShrink property. */\n  flexShrink?: string | number\n  /** CSS flexBasis property. */\n  flexBasis?: string\n  /** CSS flexWrap property. */\n  flexWrap?: string\n  /** CSS justify-content property. */\n  justify?: string\n  /** CSS align-items property. */\n  align?: string\n  /** CSS align-self property. */\n  alignSelf?: string\n  /** CSS margin property. */\n  margin?: string\n  /** CSS padding property. */\n  padding?: string\n  /** CSS width property. */\n  width?: string\n  /** CSS height property. */\n  height?: string\n  /** CSS maxWidth property. */\n  maxWidth?: string\n  /** CSS maxHeight property. */\n  maxHeight?: string\n  /** CSS minWidth property. */\n  minWidth?: string\n  /** CSS minHeight property. */\n  minHeight?: string\n  /** Gap between child elements. */\n  gap?: string\n  /** CSS borderRadius property. */\n  borderRadius?: string\n  /** Additional inline styles for the component. */\n  style?: Record<string, unknown> | null\n  /** Additional class name(s) for the component. */\n  className?: string\n  /** Tab index for keyboard navigation. */\n  tabIndex?: number\n  /** Ref for accessing the underlying DOM element. */\n  ref?: LegacyRef<HTMLDivElement> | undefined | null\n  /** Callback function for click event. */\n  onClick?: () => void\n  /** If true, sets the layout direction to column. */\n  column?: boolean\n} & Omit<CSSProperties, 'direction'>;\n"],"names":["LayoutDirection"],"mappings":"AAKYA,IAAAA,WAAAA,GAAe,OAAfA,EAAe,IAAA,MAAfA,EAAe,OAAA,SAAfA,CAAe,EAAA"}

package/dist/ui/src/core/ui/components/container/CollapsibleContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleContainer.js","sources":["../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode,\n  useEffect, useLayoutEffect, useMemo, CSSProperties, PropsWithChildren } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport classes from './CollapsibleContainer.module.scss'\nimport { LayoutBoxProps } from './layoutBox.types'\n\n\n/**\n * Mapping of element property names for calculating dimensions.\n */\nconst elementPropNameMap: Record<string, string> = {\n  width: 'scrollWidth',\n  height: 'scrollHeight',\n}\n\n/**\n * Props for the CollapsibleContainer component.\n */\nexport type CollapsibleContainerProps = PropsWithChildren & LayoutBoxProps & {\n  collapsed?: boolean\n  collapseHandler?: (collapsed: boolean) => void\n  children?: ReactNode\n  className?: string\n  horizontal?: boolean\n} & CSSProperties\n\n/**\n * CollapsibleContainer component.\n *\n * @type {React.FC<CollapsibleContainerProps>}\n * @returns {React.ReactElement} The CollapsibleContainer.\n */\nexport const CollapsibleContainer: FC<CollapsibleContainerProps> = memo(({\n  collapsed = false, collapseHandler, children, horizontal = false, className = '', id, ...props\n}: CollapsibleContainerProps) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [contentProp, setContentProp] = useState(0)\n\n  const { dataProps, restProps: style } = useParseProps(props)\n\n  const vertical = !horizontal\n\n  useEffect(() => {\n    collapseHandler?.(collapsed)\n  }, [collapseHandler, collapsed])\n\n  useLayoutEffect(() => {\n    if (containerRef?.current) {\n      const propName = vertical ? 'height' : 'width'\n\n      // TODO test with requestAnimationFrame\n      setTimeout(() => {\n        if (containerRef?.current) {\n          setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n        }\n      }, 100)\n    }\n  }, [containerRef, vertical])\n\n  const styleProps: CSSProperties = useMemo(() => ({\n    '--prop-name': vertical ? 'height' : 'width',\n    '--prop-max-name': vertical ? 'max-height' : 'max-width',\n    '--prop-value': `${contentProp}px`,\n    ...style,\n  } as CSSProperties), [vertical, style, contentProp])\n\n  const classNames = useMemo(() => {\n    const classNames = [vertical ? classes.vertical : classes.horizontal]\n\n    if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.collapsed)\n    }\n    if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.expanded)\n    }\n    return classNames.join(' ')\n  }, [collapsed, contentProp, vertical])\n\n  return (\n    <div\n      id={`${(typeof id !== 'undefined' && id) || id}`}\n      className={`${classes['collapsible-container']} ${classNames} ${className} `}\n      ref={containerRef}\n      style={styleProps}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n    >\n      {children}\n    </div>\n  )\n})\n\nCollapsibleContainer.displayName = 'CollapsibleContainer'\n"],"names":["elementPropNameMap","width","height","CollapsibleContainer","memo","_ref","collapsed","collapseHandler","children","horizontal","className","id","props","containerRef","useRef","contentProp","setContentProp","useState","dataProps","restProps","style","useParseProps","vertical","useEffect","useLayoutEffect","current","propName","setTimeout","styleProps","useMemo","concat","classNames","classes","push","expanded","join","React","createElement","_extends","ref","dataTestId","displayName"],"mappings":"wVAYA,MAAMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAoBGC,EAAsDC,EAAIA,MAACC,IAEvC,IAFwCC,UACvEA,GAAY,EAAKC,gBAAEA,EAAeC,SAAEA,EAAQC,WAAEA,GAAa,EAAKC,UAAEA,EAAY,GAAEC,GAAEA,KAAOC,GAC/DP,EAC1B,MAAMQ,EAAeC,SAAuB,OACrCC,EAAaC,GAAkBC,EAAQA,SAAC,IAEzCC,UAAEA,EAAWC,UAAWC,GAAUC,EAAAA,cAAcT,GAEhDU,GAAYb,EAElBc,EAAAA,WAAU,KACRhB,SAAAA,EAAkBD,EAAU,GAC3B,CAACC,EAAiBD,IAErBkB,EAAAA,iBAAgB,KACd,GAAIX,SAAAA,EAAcY,QAAS,CACzB,MAAMC,EAAWJ,EAAW,SAAW,QAGvCK,YAAW,KACLd,SAAAA,EAAcY,SAChBT,EAAgBH,EAAaY,QAAgBzB,EAAmB0B,IAClE,GACC,IACL,IACC,CAACb,EAAcS,IAElB,MAAMM,EAA4BC,EAAAA,SAAQ,KAAO,CAC/C,cAAeP,EAAW,SAAW,QACrC,kBAAmBA,EAAW,aAAe,YAC7C,eAAcQ,GAAAA,OAAKf,EAAe,SAC/BK,KACgB,CAACE,EAAUF,EAAOL,IAEjCgB,EAAaF,EAAAA,SAAQ,KACzB,MAAME,EAAa,CAACT,EAAWU,EAAAA,QAAQV,SAAWU,EAAAA,QAAQvB,YAQ1D,OANIH,GAAaS,GAAbT,MAA4BS,GAC9BgB,EAAWE,KAAKD,UAAQ1B,YAErBA,GAAaS,GAAd,MAA6BA,GAC/BgB,EAAWE,KAAKD,UAAQE,UAEnBH,EAAWI,KAAK,IAAI,GAC1B,CAAC7B,EAAWS,EAAaO,IAE5B,OACEc,MAAAC,cAAA,MAAAC,UAAA,CACE3B,GAAE,GAAAmB,YAAoB,IAAPnB,GAAsBA,GAAOA,GAC5CD,UAASoB,GAAAA,OAAKE,EAAAA,QAAQ,yBAAwBF,KAAAA,OAAIC,EAAU,KAAAD,OAAIpB,EAAa,KAC7E6B,IAAK1B,EACLO,MAAOQ,GACHV,EAAS,CACb,cAAaA,EAAUsB,YAActB,EAAU,gBAAkBP,IAEhEH,EACG,IAIVL,EAAqBsC,YAAc"}
+{"version":3,"file":"CollapsibleContainer.js","sources":["../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode,\n  useEffect, useLayoutEffect, useMemo, CSSProperties, PropsWithChildren } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport classes from './CollapsibleContainer.module.scss'\nimport { LayoutBoxProps } from './layoutBox.types'\n\n\n/**\n * Mapping of element property names for calculating dimensions.\n */\nconst elementPropNameMap: Record<string, string> = {\n  width: 'scrollWidth',\n  height: 'scrollHeight',\n}\n\n/**\n * Props for the CollapsibleContainer component.\n */\nexport type CollapsibleContainerProps = PropsWithChildren & Omit<LayoutBoxProps, 'ref'> & {\n  collapsed?: boolean\n  collapseHandler?: (collapsed: boolean) => void\n  children?: ReactNode\n  className?: string\n  horizontal?: boolean\n} & CSSProperties\n\n/**\n * CollapsibleContainer component.\n *\n * @type {React.FC<CollapsibleContainerProps>}\n * @returns {React.ReactElement} The CollapsibleContainer.\n */\nexport const CollapsibleContainer: FC<CollapsibleContainerProps> = memo(({\n  collapsed = false, collapseHandler, children, horizontal = false, className = '', id, ...props\n}: CollapsibleContainerProps) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [contentProp, setContentProp] = useState(0)\n\n  const { dataProps, restProps: style } = useParseProps(props)\n\n  const vertical = !horizontal\n\n  useEffect(() => {\n    collapseHandler?.(collapsed)\n  }, [collapseHandler, collapsed])\n\n  useLayoutEffect(() => {\n    if (containerRef?.current) {\n      const propName = vertical ? 'height' : 'width'\n\n      // TODO test with requestAnimationFrame\n      setTimeout(() => {\n        if (containerRef?.current) {\n          setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n        }\n      }, 100)\n    }\n  }, [containerRef, vertical])\n\n  const styleProps: CSSProperties = useMemo(() => ({\n    '--prop-name': vertical ? 'height' : 'width',\n    '--prop-max-name': vertical ? 'max-height' : 'max-width',\n    '--prop-value': `${contentProp}px`,\n    ...style,\n  } as CSSProperties), [vertical, style, contentProp])\n\n  const classNames = useMemo(() => {\n    const classNames = [vertical ? classes.vertical : classes.horizontal]\n\n    if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.collapsed)\n    }\n    if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.expanded)\n    }\n    return classNames.join(' ')\n  }, [collapsed, contentProp, vertical])\n\n  return (\n    <div\n      id={`${(typeof id !== 'undefined' && id) || id}`}\n      className={`${classes['collapsible-container']} ${classNames} ${className} `}\n      ref={containerRef}\n      style={styleProps}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n    >\n      {children}\n    </div>\n  )\n})\n\nCollapsibleContainer.displayName = 'CollapsibleContainer'\n"],"names":["elementPropNameMap","width","height","CollapsibleContainer","memo","_ref","collapsed","collapseHandler","children","horizontal","className","id","props","containerRef","useRef","contentProp","setContentProp","useState","dataProps","restProps","style","useParseProps","vertical","useEffect","useLayoutEffect","current","propName","setTimeout","styleProps","useMemo","concat","classNames","classes","push","expanded","join","React","createElement","_extends","ref","dataTestId","displayName"],"mappings":"wVAYA,MAAMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAoBGC,EAAsDC,EAAIA,MAACC,IAEvC,IAFwCC,UACvEA,GAAY,EAAKC,gBAAEA,EAAeC,SAAEA,EAAQC,WAAEA,GAAa,EAAKC,UAAEA,EAAY,GAAEC,GAAEA,KAAOC,GAC/DP,EAC1B,MAAMQ,EAAeC,SAAuB,OACrCC,EAAaC,GAAkBC,EAAQA,SAAC,IAEzCC,UAAEA,EAAWC,UAAWC,GAAUC,EAAAA,cAAcT,GAEhDU,GAAYb,EAElBc,EAAAA,WAAU,KACRhB,SAAAA,EAAkBD,EAAU,GAC3B,CAACC,EAAiBD,IAErBkB,EAAAA,iBAAgB,KACd,GAAIX,SAAAA,EAAcY,QAAS,CACzB,MAAMC,EAAWJ,EAAW,SAAW,QAGvCK,YAAW,KACLd,SAAAA,EAAcY,SAChBT,EAAgBH,EAAaY,QAAgBzB,EAAmB0B,IAClE,GACC,IACL,IACC,CAACb,EAAcS,IAElB,MAAMM,EAA4BC,EAAAA,SAAQ,KAAO,CAC/C,cAAeP,EAAW,SAAW,QACrC,kBAAmBA,EAAW,aAAe,YAC7C,eAAcQ,GAAAA,OAAKf,EAAe,SAC/BK,KACgB,CAACE,EAAUF,EAAOL,IAEjCgB,EAAaF,EAAAA,SAAQ,KACzB,MAAME,EAAa,CAACT,EAAWU,EAAAA,QAAQV,SAAWU,EAAAA,QAAQvB,YAQ1D,OANIH,GAAaS,GAAbT,MAA4BS,GAC9BgB,EAAWE,KAAKD,UAAQ1B,YAErBA,GAAaS,GAAd,MAA6BA,GAC/BgB,EAAWE,KAAKD,UAAQE,UAEnBH,EAAWI,KAAK,IAAI,GAC1B,CAAC7B,EAAWS,EAAaO,IAE5B,OACEc,MAAAC,cAAA,MAAAC,UAAA,CACE3B,GAAE,GAAAmB,YAAoB,IAAPnB,GAAsBA,GAAOA,GAC5CD,UAASoB,GAAAA,OAAKE,EAAAA,QAAQ,yBAAwBF,KAAAA,OAAIC,EAAU,KAAAD,OAAIpB,EAAa,KAC7E6B,IAAK1B,EACLO,MAAOQ,GACHV,EAAS,CACb,cAAaA,EAAUsB,YAActB,EAAU,gBAAkBP,IAEhEH,EACG,IAIVL,EAAqBsC,YAAc"}

package/dist/ui/src/core/ui/components/container/LayoutBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutBox.js","sources":["../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\nimport classes from './layoutBox.module.scss'\n\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n  start: 'flex-start',\n  'flex-start': 'flex-start',\n  end: 'flex-end',\n  'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n  id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined) => {\n  const { dataProps, restProps } = useParseProps(props)\n\n  /**\n   * Memoized onClick event properties.\n   * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n   */\n  const onClickProps = useMemo(() => (onClick ? ({\n    onClick,\n    onKeyDown: onClick,\n    role: 'button',\n    tabIndex: -1,\n  }) : {}), [onClick])\n\n  /**\n   * Memoized resolved direction based on the column prop.\n   * @type {LayoutDirection}\n   */\n  const resolvedColumn = useMemo(() => ((\n    column !== undefined && column === true)\n    ? LayoutDirection.COLUMN\n    : null), [column])\n\n  /**\n   * Memoized styles combining parsed props and additional styles.\n   * @type {CSSProperties}\n   */\n  const styles = useMemo(() => (\n    {\n      ...restProps,\n      ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n      ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n      ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n      ...style,\n    }\n  ), [resolvedColumn, restProps, style])\n\n  return (\n    <div\n      {...(id ? { id: `${id}` } : {})}\n      ref={ref}\n      tabIndex={tabIndex}\n      className={`${(classes as any)['layout-box']} ${className}`}\n      style={styles as CSSProperties}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n      {...onClickProps}\n    >\n      {children}\n    </div>\n  )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/**\n * Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","onClick","column","props","dataProps","restProps","useParseProps","onClickProps","useMemo","onKeyDown","role","resolvedColumn","undefined","LayoutDirection","COLUMN","styles","align","alignItems","justify","justifyContent","direction","flexDirection","React","createElement","_extends","concat","classes","dataTestId","displayName","LayoutBox","memo"],"mappings":"oRAYA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,EAAUA,YAAC,CAAAC,EAEtBC,KAA+C,IAFxBC,GACxCA,EAAEC,MAAEA,EAAKC,SAAEA,EAAQC,SAAEA,EAAQC,UAAEA,EAAY,GAAEC,QAAEA,EAAOC,OAAEA,KAAWC,GACpDT,EACf,MAAMU,UAAEA,EAASC,UAAEA,GAAcC,EAAAA,cAAcH,GAMzCI,EAAeC,WAAQ,IAAOP,EAAW,CAC7CA,UACAQ,UAAWR,EACXS,KAAM,SACNX,UAAW,GACR,CAAG,GAAE,CAACE,IAMLU,EAAiBH,EAAOA,SAAC,SAClBI,IAAXV,IAAmC,IAAXA,EACtBW,EAAAA,gBAAgBC,OAChB,MAAO,CAACZ,IAMNa,EAASP,EAAAA,SAAQ,KACrB,IACKH,KACCA,EAAUW,MAAQ,CAAEC,WAAY3B,EAAiBe,EAAUW,QAAqB,MAChFX,EAAUa,QAAU,CAAEC,eAAgB7B,EAAiBe,EAAUa,UAAuB,MACxFb,EAAUe,WAAaT,EAAiB,CAAEU,cAAehB,EAAUe,WAAaT,GAAmB,MACpGd,KAEJ,CAACc,EAAgBN,EAAWR,IAE/B,OACEyB,MAAAC,oBAAAC,EAAAA,QAAA,CAAA,EACO5B,EAAK,CAAEA,GAAE,GAAA6B,OAAK7B,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAS,GAAAyB,OAAMC,EAAO,QAAS,cAAaD,KAAAA,OAAIzB,GAChDH,MAAOkB,GACHX,EAAS,CACb,cAAaA,EAAUuB,YAAcvB,EAAU,gBAAkBR,GAC7DW,GAEHT,EACG,IAIVN,EAAsBoC,YAAc,8BAMvBC,EAAgCC,EAAIA,KAAiBtC,GAElEqC,EAAUD,YAAc"}
+{"version":3,"file":"LayoutBox.js","sources":["../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\nimport classes from './layoutBox.module.scss'\n\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n  start: 'flex-start',\n  'flex-start': 'flex-start',\n  end: 'flex-end',\n  'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n  id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined | null) => {\n  const { dataProps, restProps } = useParseProps(props)\n\n  /**\n   * Memoized onClick event properties.\n   * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n   */\n  const onClickProps = useMemo(() => (onClick ? ({\n    onClick,\n    onKeyDown: onClick,\n    role: 'button',\n    tabIndex: -1,\n  }) : {}), [onClick])\n\n  /**\n   * Memoized resolved direction based on the column prop.\n   * @type {LayoutDirection}\n   */\n  const resolvedColumn = useMemo(() => ((\n    column !== undefined && column === true)\n    ? LayoutDirection.COLUMN\n    : null), [column])\n\n  /**\n   * Memoized styles combining parsed props and additional styles.\n   * @type {CSSProperties}\n   */\n  const styles = useMemo(() => (\n    {\n      ...restProps,\n      ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n      ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n      ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n      ...style,\n    }\n  ), [resolvedColumn, restProps, style])\n\n  return (\n    <div\n      {...(id ? { id: `${id}` } : {})}\n      ref={ref}\n      tabIndex={tabIndex}\n      className={`${(classes as any)['layout-box']} ${className}`}\n      style={styles as CSSProperties}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n      {...onClickProps}\n    >\n      {children}\n    </div>\n  )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/**\n * Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","onClick","column","props","dataProps","restProps","useParseProps","onClickProps","useMemo","onKeyDown","role","resolvedColumn","undefined","LayoutDirection","COLUMN","styles","align","alignItems","justify","justifyContent","direction","flexDirection","React","createElement","_extends","concat","classes","dataTestId","displayName","LayoutBox","memo"],"mappings":"oRAYA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,EAAUA,YAAC,CAAAC,EAEtBC,KAAsD,IAF/BC,GACxCA,EAAEC,MAAEA,EAAKC,SAAEA,EAAQC,SAAEA,EAAQC,UAAEA,EAAY,GAAEC,QAAEA,EAAOC,OAAEA,KAAWC,GACpDT,EACf,MAAMU,UAAEA,EAASC,UAAEA,GAAcC,EAAAA,cAAcH,GAMzCI,EAAeC,WAAQ,IAAOP,EAAW,CAC7CA,UACAQ,UAAWR,EACXS,KAAM,SACNX,UAAW,GACR,CAAG,GAAE,CAACE,IAMLU,EAAiBH,EAAOA,SAAC,SAClBI,IAAXV,IAAmC,IAAXA,EACtBW,EAAAA,gBAAgBC,OAChB,MAAO,CAACZ,IAMNa,EAASP,EAAAA,SAAQ,KACrB,IACKH,KACCA,EAAUW,MAAQ,CAAEC,WAAY3B,EAAiBe,EAAUW,QAAqB,MAChFX,EAAUa,QAAU,CAAEC,eAAgB7B,EAAiBe,EAAUa,UAAuB,MACxFb,EAAUe,WAAaT,EAAiB,CAAEU,cAAehB,EAAUe,WAAaT,GAAmB,MACpGd,KAEJ,CAACc,EAAgBN,EAAWR,IAE/B,OACEyB,MAAAC,oBAAAC,EAAAA,QAAA,CAAA,EACO5B,EAAK,CAAEA,GAAE,GAAA6B,OAAK7B,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAS,GAAAyB,OAAMC,EAAO,QAAS,cAAaD,KAAAA,OAAIzB,GAChDH,MAAOkB,GACHX,EAAS,CACb,cAAaA,EAAUuB,YAAcvB,EAAU,gBAAkBR,GAC7DW,GAEHT,EACG,IAIVN,EAAsBoC,YAAc,8BAMvBC,EAAgCC,EAAIA,KAAiBtC,GAElEqC,EAAUD,YAAc"}

package/dist/ui/src/core/ui/components/container/layoutBox.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"layoutBox.types.js","sources":["../../../../../../../src/core/ui/components/container/layoutBox.types.ts"],"sourcesContent":["import { CSSProperties, PropsWithChildren, Ref } from 'react'\n\n/**\n * Enum representing the possible layout directions.\n */\nexport enum LayoutDirection {\n  ROW = 'row',\n  COLUMN = 'column',\n}\n\n/**\n * Props for the LayoutBox component.\n */\nexport type LayoutBoxProps = PropsWithChildren & {\n  /** Unique identifier for the component. */\n  id?: string | number\n  /** CSS flex property. */\n  flex?: string\n  /** CSS flexGrow property. */\n  flexGrow?: string | number\n  /** Text alignment within the box. */\n  alignText?: 'center' | 'right' | 'left'\n  /** Direction of the layout (row or column). */\n  direction?: LayoutDirection | string\n  /** CSS flexShrink property. */\n  flexShrink?: string | number\n  /** CSS flexBasis property. */\n  flexBasis?: string\n  /** CSS flexWrap property. */\n  flexWrap?: string\n  /** CSS justify-content property. */\n  justify?: string\n  /** CSS align-items property. */\n  align?: string\n  /** CSS align-self property. */\n  alignSelf?: string\n  /** CSS margin property. */\n  margin?: string\n  /** CSS padding property. */\n  padding?: string\n  /** CSS width property. */\n  width?: string\n  /** CSS height property. */\n  height?: string\n  /** CSS maxWidth property. */\n  maxWidth?: string\n  /** CSS maxHeight property. */\n  maxHeight?: string\n  /** CSS minWidth property. */\n  minWidth?: string\n  /** CSS minHeight property. */\n  minHeight?: string\n  /** Gap between child elements. */\n  gap?: string\n  /** CSS borderRadius property. */\n  borderRadius?: string\n  /** Additional inline styles for the component. */\n  style?: Record<string, unknown> | null\n  /** Additional class name(s) for the component. */\n  className?: string\n  /** Tab index for keyboard navigation. */\n  tabIndex?: number\n  /** Ref for accessing the underlying DOM element. */\n  ref?: Ref<HTMLDivElement> | undefined\n  /** Callback function for click event. */\n  onClick?: () => void\n  /** If true, sets the layout direction to column. */\n  column?: boolean\n} & Omit<CSSProperties, 'direction'>;\n"],"names":["LayoutDirection"],"mappings":"oEAKYA,IAAAA,WAAAA,GAAe,OAAfA,EAAe,IAAA,MAAfA,EAAe,OAAA,SAAfA,CAAe,EAAA"}
+{"version":3,"file":"layoutBox.types.js","sources":["../../../../../../../src/core/ui/components/container/layoutBox.types.ts"],"sourcesContent":["import { CSSProperties, LegacyRef, PropsWithChildren } from 'react'\n\n/**\n * Enum representing the possible layout directions.\n */\nexport enum LayoutDirection {\n  ROW = 'row',\n  COLUMN = 'column',\n}\n\n/**\n * Props for the LayoutBox component.\n */\nexport type LayoutBoxProps = PropsWithChildren & {\n  /** Unique identifier for the component. */\n  id?: string | number\n  /** CSS flex property. */\n  flex?: string\n  /** CSS flexGrow property. */\n  flexGrow?: string | number\n  /** Text alignment within the box. */\n  alignText?: 'center' | 'right' | 'left'\n  /** Direction of the layout (row or column). */\n  direction?: LayoutDirection | string\n  /** CSS flexShrink property. */\n  flexShrink?: string | number\n  /** CSS flexBasis property. */\n  flexBasis?: string\n  /** CSS flexWrap property. */\n  flexWrap?: string\n  /** CSS justify-content property. */\n  justify?: string\n  /** CSS align-items property. */\n  align?: string\n  /** CSS align-self property. */\n  alignSelf?: string\n  /** CSS margin property. */\n  margin?: string\n  /** CSS padding property. */\n  padding?: string\n  /** CSS width property. */\n  width?: string\n  /** CSS height property. */\n  height?: string\n  /** CSS maxWidth property. */\n  maxWidth?: string\n  /** CSS maxHeight property. */\n  maxHeight?: string\n  /** CSS minWidth property. */\n  minWidth?: string\n  /** CSS minHeight property. */\n  minHeight?: string\n  /** Gap between child elements. */\n  gap?: string\n  /** CSS borderRadius property. */\n  borderRadius?: string\n  /** Additional inline styles for the component. */\n  style?: Record<string, unknown> | null\n  /** Additional class name(s) for the component. */\n  className?: string\n  /** Tab index for keyboard navigation. */\n  tabIndex?: number\n  /** Ref for accessing the underlying DOM element. */\n  ref?: LegacyRef<HTMLDivElement> | undefined | null\n  /** Callback function for click event. */\n  onClick?: () => void\n  /** If true, sets the layout direction to column. */\n  column?: boolean\n} & Omit<CSSProperties, 'direction'>;\n"],"names":["LayoutDirection"],"mappings":"oEAKYA,IAAAA,WAAAA,GAAe,OAAfA,EAAe,IAAA,MAAfA,EAAe,OAAA,SAAfA,CAAe,EAAA"}

package/dist/utils/esm/index.css

@@ -28,29 +28,24 @@
   width: var(--height);
   height: var(--width);
 }
-.layoutBox-module_layout-box__faPND {
-  display: flex;
+.divider-module_divider-line__6CesR {
   position: relative;
-  flex-direction: row;
-  flex: 0;
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: auto;
-  flex-wrap: nowrap;
-  gap: 0;
-  text-align: left;
-  justify-content: flex-start;
-  align-items: flex-start;
-  align-self: auto;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  height: auto;
-  max-width: none;
-  max-height: none;
-  min-width: 0;
-  min-height: 0;
-  border-radius: initial;
+  display: block;
+  transition: opacity, width, height 250ms ease-in-out;
+  background-color: var(--color);
+  opacity: var(--opacity);
+}
+.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
+  height: var(--length);
+  left: var(--left);
+  width: var(--width);
+  margin: var(--margin);
+}
+.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
+  width: var(--length);
+  left: var(--left);
+  height: var(--height);
+  margin: var(--margin);
 }
 .CollapsibleContainer-module_collapsible-container__u0Jmm {
   transform-origin: 0% 0%;
@@ -85,22 +80,27 @@
   max-width: var(--prop-value);
   opacity: 1;
 }
-.divider-module_divider-line__6CesR {
+.layoutBox-module_layout-box__faPND {
+  display: flex;
   position: relative;
-  display: block;
-  transition: opacity, width, height 250ms ease-in-out;
-  background-color: var(--color);
-  opacity: var(--opacity);
-}
-.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
-  height: var(--length);
-  left: var(--left);
-  width: var(--width);
-  margin: var(--margin);
-}
-.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
-  width: var(--length);
-  left: var(--left);
-  height: var(--height);
-  margin: var(--margin);
+  flex-direction: row;
+  flex: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+  flex-wrap: nowrap;
+  gap: 0;
+  text-align: left;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-self: auto;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  min-width: 0;
+  min-height: 0;
+  border-radius: initial;
 }

package/dist/utils/index.css

@@ -28,29 +28,24 @@
   width: var(--height);
   height: var(--width);
 }
-.layoutBox-module_layout-box__faPND {
-  display: flex;
+.divider-module_divider-line__6CesR {
   position: relative;
-  flex-direction: row;
-  flex: 0;
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: auto;
-  flex-wrap: nowrap;
-  gap: 0;
-  text-align: left;
-  justify-content: flex-start;
-  align-items: flex-start;
-  align-self: auto;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  height: auto;
-  max-width: none;
-  max-height: none;
-  min-width: 0;
-  min-height: 0;
-  border-radius: initial;
+  display: block;
+  transition: opacity, width, height 250ms ease-in-out;
+  background-color: var(--color);
+  opacity: var(--opacity);
+}
+.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
+  height: var(--length);
+  left: var(--left);
+  width: var(--width);
+  margin: var(--margin);
+}
+.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
+  width: var(--length);
+  left: var(--left);
+  height: var(--height);
+  margin: var(--margin);
 }
 .CollapsibleContainer-module_collapsible-container__u0Jmm {
   transform-origin: 0% 0%;
@@ -85,22 +80,27 @@
   max-width: var(--prop-value);
   opacity: 1;
 }
-.divider-module_divider-line__6CesR {
+.layoutBox-module_layout-box__faPND {
+  display: flex;
   position: relative;
-  display: block;
-  transition: opacity, width, height 250ms ease-in-out;
-  background-color: var(--color);
-  opacity: var(--opacity);
-}
-.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
-  height: var(--length);
-  left: var(--left);
-  width: var(--width);
-  margin: var(--margin);
-}
-.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
-  width: var(--length);
-  left: var(--left);
-  height: var(--height);
-  margin: var(--margin);
+  flex-direction: row;
+  flex: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+  flex-wrap: nowrap;
+  gap: 0;
+  text-align: left;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-self: auto;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  min-width: 0;
+  min-height: 0;
+  border-radius: initial;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@e1011/es-kit",
-  "version": "1.0.175",
+  "version": "1.0.176",
   "main": "dist/lib/cjs/src/index.js",
   "module": "dist/lib/esm/src/index.js",
   "sideEffects": false,