npm - @lumx/react - Versions diffs - 2.2.22 → 2.2.23 - Mend

@lumx/react 2.2.22 → 2.2.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/esm/_internal/FlexBox.js.map +1 -1
package/esm/_internal/GenericBlock.js +32 -52
package/esm/_internal/GenericBlock.js.map +1 -1
package/esm/_internal/Link2.js.map +1 -1
package/esm/_internal/Thumbnail2.js +26 -12
package/esm/_internal/Thumbnail2.js.map +1 -1
package/esm/_internal/components.js +7 -7
package/esm/_internal/components.js.map +1 -1
package/esm/index.js +1 -1
package/package.json +4 -4
package/src/components/flex-box/FlexBox.stories.tsx +1 -1
package/src/components/flex-box/FlexBox.tsx +1 -1
package/src/components/generic-block/GenericBlock.stories.jsx +106 -0
package/src/components/generic-block/GenericBlock.test.tsx +36 -19
package/src/components/generic-block/GenericBlock.tsx +52 -53
package/src/components/index.ts +7 -7
package/src/components/link/Link.stories.tsx +70 -40
package/src/components/link/Link.tsx +2 -2
package/src/components/thumbnail/useFocusPointStyle.test.ts +92 -0
package/src/components/thumbnail/useFocusPointStyle.tsx +26 -4
package/types.d.ts +18 -15
package/src/components/generic-block/GenericBlock.stories.tsx +0 -90

package/esm/_internal/FlexBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexBox.js","sources":["../../../src/components/flex-box/FlexBox.tsx"],"sourcesContent":["import { Alignment, HorizontalAlignment, Orientation, VerticalAlignment } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport classNames from 'classnames';\nimport castArray from 'lodash/castArray';\nimport React, { forwardRef, ReactNode } from 'react';\nimport { Size } from '..';\n\nexport type MarginAutoAlignment = Extract<Alignment, 'top' \| 'bottom' \| 'right' \| 'left'>;\nexport type GapSize = Extract<Size, 'regular' \| 'medium' \| 'big' \| 'huge'>;\n\n/*\n Defines the props of the component.\n /\nexport interface FlexBoxProps extends GenericProps {\n /* Children elements. /\n children?: ReactNode;\n /* Whether the \"content filling space\" is enabled or not. /\n fillSpace?: boolean;\n /* Gap space between flexbox items. /\n gap?: GapSize;\n /* Flex horizontal alignment. /\n hAlign?: VerticalAlignment;\n /* Whether the \"auto margin\" is enabled all around or not. /\n marginAuto?: MarginAutoAlignment \| MarginAutoAlignment[];\n /* Whether the \"content shrink\" is disabled or not. /\n noShrink?: boolean;\n /* Flex direction. /\n orientation?: Orientation;\n /* Flex vertical alignment. /\n vAlign?: HorizontalAlignment;\n /* Whether the \"flex wrap\" is enabled or not. /\n wrap?: boolean;\n}\n\n/\n Component display name.\n /\nconst COMPONENT_NAME = 'FlexBox';\n\n/\n Component default class name and class prefix.\n /\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/\n FlexBox component.\n \n @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n children,\n className,\n fillSpace,\n gap,\n hAlign,\n marginAuto,\n noShrink,\n orientation,\n vAlign,\n wrap,\n ...forwardedProps\n } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n orientation: orientation ?? (wrap \|\| hAlign \|\| vAlign ? Orientation.horizontal : null),\n vAlign,\n hAlign,\n gap,\n }),\n wrap && `${CLASSNAME}--wrap`,\n fillSpace && `${CLASSNAME}--fill-space`,\n noShrink && `${CLASSNAME}--no-shrink`,\n marginAuto && castArray(marginAuto).map((align) => `${CLASSNAME}--margin-auto-${align}`),\n )}\n >\n {children}\n </div>\n );\n});\nFlexBox.displayName = COMPONENT_NAME;\nFlexBox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","FlexBox","forwardRef","props","ref","children","className","fillSpace","gap","hAlign","marginAuto","noShrink","orientation","vAlign","wrap","forwardedProps","classNames","handleBasicClasses","prefix","Orientation","horizontal","castArray","map","align","displayName"],"mappings":";;;;;;AAkCA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,OAA2C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE9EC,QAF8E,GAa9EF,KAb8E,CAE9EE,QAF8E;AAAA,MAG9EC,SAH8E,GAa9EH,KAb8E,CAG9EG,SAH8E;AAAA,MAI9EC,SAJ8E,GAa9EJ,KAb8E,CAI9EI,SAJ8E;AAAA,MAK9EC,GAL8E,GAa9EL,KAb8E,CAK9EK,GAL8E;AAAA,MAM9EC,MAN8E,GAa9EN,KAb8E,CAM9EM,MAN8E;AAAA,MAO9EC,UAP8E,GAa9EP,KAb8E,CAO9EO,UAP8E;AAAA,MAQ9EC,QAR8E,GAa9ER,KAb8E,CAQ9EQ,QAR8E;AAAA,MAS9EC,WAT8E,GAa9ET,KAb8E,CAS9ES,WAT8E;AAAA,MAU9EC,MAV8E,GAa9EV,KAb8E,CAU9EU,MAV8E;AAAA,MAW9EC,IAX8E,GAa9EX,KAb8E,CAW9EW,IAX8E;AAAA,MAY3EC,cAZ2E,4BAa9EZ,KAb8E;;AAelF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQW,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CACjBV,SADiB,EAEjBW,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAEnB,SADO;AAEfa,MAAAA,WAAW,EAAEA,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAkBE,IAAI,IAAIL,MAAR,IAAkBI,MAAlB,GAA2BM,WAAW,CAACC,UAAvC,GAAoD,IAFlE;AAGfP,MAAAA,MAAM,EAANA,MAHe;AAIfJ,MAAAA,MAAM,EAANA,MAJe;AAKfD,MAAAA,GAAG,EAAHA;AALe,KAAD,CAFD,EASjBM,IAAI,cAAOf,SAAP,WATa,EAUjBQ,SAAS,cAAOR,SAAP,iBAVQ,EAWjBY,QAAQ,cAAOZ,SAAP,gBAXS,EAYjBW,UAAU,IAAIW,SAAS,CAACX,UAAD,CAAT,CAAsBY,GAAtB,CAA0B,UAACC,KAAD;AAAA,uBAAcxB,SAAd,2BAAwCwB,KAAxC;AAAA,KAA1B,CAZG;AAHzB,MAkBKlB,QAlBL,CADJ;AAsBH,CArCoE;AAsCrEJ,OAAO,CAACuB,WAAR,GAAsB1B,cAAtB;AACAG,OAAO,CAACK,SAAR,GAAoBP,SAApB;;;;"}
1	+ {"version":3,"file":"FlexBox.js","sources":["../../../src/components/flex-box/FlexBox.tsx"],"sourcesContent":["import { Alignment, HorizontalAlignment, Orientation, VerticalAlignment } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport classNames from 'classnames';\nimport castArray from 'lodash/castArray';\nimport React, { forwardRef, ReactNode } from 'react';\nimport { Size } from '..';\n\nexport type MarginAutoAlignment = Extract<Alignment, 'top' \| 'bottom' \| 'right' \| 'left'>;\nexport type GapSize = Extract<Size, 'tiny' \| 'regular' \| 'medium' \| 'big' \| 'huge'>;\n\n/*\n Defines the props of the component.\n /\nexport interface FlexBoxProps extends GenericProps {\n /* Children elements. /\n children?: ReactNode;\n /* Whether the \"content filling space\" is enabled or not. /\n fillSpace?: boolean;\n /* Gap space between flexbox items. /\n gap?: GapSize;\n /* Flex horizontal alignment. /\n hAlign?: VerticalAlignment;\n /* Whether the \"auto margin\" is enabled all around or not. /\n marginAuto?: MarginAutoAlignment \| MarginAutoAlignment[];\n /* Whether the \"content shrink\" is disabled or not. /\n noShrink?: boolean;\n /* Flex direction. /\n orientation?: Orientation;\n /* Flex vertical alignment. /\n vAlign?: HorizontalAlignment;\n /* Whether the \"flex wrap\" is enabled or not. /\n wrap?: boolean;\n}\n\n/\n Component display name.\n /\nconst COMPONENT_NAME = 'FlexBox';\n\n/\n Component default class name and class prefix.\n /\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/\n FlexBox component.\n \n @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n children,\n className,\n fillSpace,\n gap,\n hAlign,\n marginAuto,\n noShrink,\n orientation,\n vAlign,\n wrap,\n ...forwardedProps\n } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n orientation: orientation ?? (wrap \|\| hAlign \|\| vAlign ? Orientation.horizontal : null),\n vAlign,\n hAlign,\n gap,\n }),\n wrap && `${CLASSNAME}--wrap`,\n fillSpace && `${CLASSNAME}--fill-space`,\n noShrink && `${CLASSNAME}--no-shrink`,\n marginAuto && castArray(marginAuto).map((align) => `${CLASSNAME}--margin-auto-${align}`),\n )}\n >\n {children}\n </div>\n );\n});\nFlexBox.displayName = COMPONENT_NAME;\nFlexBox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","FlexBox","forwardRef","props","ref","children","className","fillSpace","gap","hAlign","marginAuto","noShrink","orientation","vAlign","wrap","forwardedProps","classNames","handleBasicClasses","prefix","Orientation","horizontal","castArray","map","align","displayName"],"mappings":";;;;;;AAkCA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,OAA2C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE9EC,QAF8E,GAa9EF,KAb8E,CAE9EE,QAF8E;AAAA,MAG9EC,SAH8E,GAa9EH,KAb8E,CAG9EG,SAH8E;AAAA,MAI9EC,SAJ8E,GAa9EJ,KAb8E,CAI9EI,SAJ8E;AAAA,MAK9EC,GAL8E,GAa9EL,KAb8E,CAK9EK,GAL8E;AAAA,MAM9EC,MAN8E,GAa9EN,KAb8E,CAM9EM,MAN8E;AAAA,MAO9EC,UAP8E,GAa9EP,KAb8E,CAO9EO,UAP8E;AAAA,MAQ9EC,QAR8E,GAa9ER,KAb8E,CAQ9EQ,QAR8E;AAAA,MAS9EC,WAT8E,GAa9ET,KAb8E,CAS9ES,WAT8E;AAAA,MAU9EC,MAV8E,GAa9EV,KAb8E,CAU9EU,MAV8E;AAAA,MAW9EC,IAX8E,GAa9EX,KAb8E,CAW9EW,IAX8E;AAAA,MAY3EC,cAZ2E,4BAa9EZ,KAb8E;;AAelF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQW,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CACjBV,SADiB,EAEjBW,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAEnB,SADO;AAEfa,MAAAA,WAAW,EAAEA,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAkBE,IAAI,IAAIL,MAAR,IAAkBI,MAAlB,GAA2BM,WAAW,CAACC,UAAvC,GAAoD,IAFlE;AAGfP,MAAAA,MAAM,EAANA,MAHe;AAIfJ,MAAAA,MAAM,EAANA,MAJe;AAKfD,MAAAA,GAAG,EAAHA;AALe,KAAD,CAFD,EASjBM,IAAI,cAAOf,SAAP,WATa,EAUjBQ,SAAS,cAAOR,SAAP,iBAVQ,EAWjBY,QAAQ,cAAOZ,SAAP,gBAXS,EAYjBW,UAAU,IAAIW,SAAS,CAACX,UAAD,CAAT,CAAsBY,GAAtB,CAA0B,UAACC,KAAD;AAAA,uBAAcxB,SAAd,2BAAwCwB,KAAxC;AAAA,KAA1B,CAZG;AAHzB,MAkBKlB,QAlBL,CADJ;AAsBH,CArCoE;AAsCrEJ,OAAO,CAACuB,WAAR,GAAsB1B,cAAtB;AACAG,OAAO,CAACK,SAAR,GAAoBP,SAApB;;;;"}

package/esm/_internal/GenericBlock.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { b as _objectWithoutProperties, f as _toArray, d as _slicedToArray, c as _extends } from './_rollupPluginBabelHelpers.js';
-import { Orientation, Size, Alignment } from './components.js';
+import { Orientation, Size } from './components.js';
 import React, { forwardRef, Children } from 'react';
 import { g as getRootClassName, c as classnames } from './getRootClassName.js';
 import 'lodash/isBoolean';
-import 'lodash/isEmpty';
+import isEmpty from 'lodash/isEmpty';
 import 'lodash/kebabCase';
-import 'lodash/noop';
+import noop from 'lodash/noop';
 import { p as partitionMulti } from './partitionMulti.js';
 import { a as isComponentType } from './type.js';
 import { F as FlexBox } from './FlexBox.js';
@@ -24,43 +24,29 @@ var CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 var DEFAULT_PROPS = {
-  gap: Size.regular,
-  orientation: Orientation.vertical,
-  hAlign: Alignment.center,
-  vAlign: Alignment.center
+  gap: Size.big,
+  orientation: Orientation.horizontal
 };
-var Figure = function Figure() {
-  return null;
-};
+var Figure = noop.bind({});
 var isFigure = isComponentType(Figure);
-var Content = function Content() {
-  return null;
-};
+var Content = noop.bind({});
 var isContent = isComponentType(Content);
-var Actions = function Actions() {
-  return null;
-};
+var Actions = noop.bind({});
 var isActions = isComponentType(Actions);
 /**
  * The GenericBlock is a layout component made of 3 sections that can be
  * displayed either horizontally of vertically with the same gap between each section.
  *
  * The sections are:
- * * (Optional) `Figure` => A visual element to display before the main content.
- * * (Required) `Content` => The main content displayed
- * * (Optional) `Actions` => One or more actions to set after the element.
+ * - `Figure` => A visual element to display before the main content.
+ * - `Content` => The main content displayed
+ * - `Actions` => One or more actions to set after the element.
  *
  * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
  */
 var BaseGenericBlock = forwardRef(function (props, ref) {
-  var _ref4, _sections$figureChild, _sections$figureChild2, _ref5, _sections$contentChil, _sections$contentChil2, _ref6, _sections$actionsChil, _sections$actionsChil2;
+  var _sections$figureChild, _ref4, _sections$figureChild2, _sections$figureChild3, _sections$contentChil, _ref5, _sections$contentChil2, _sections$contentChil3, _sections$actionsChil, _ref6, _sections$actionsChil2, _sections$actionsChil3;
   var className = props.className,
       figure = props.figure,
@@ -89,48 +75,42 @@ var BaseGenericBlock = forwardRef(function (props, ref) {
     return {
       figureChild: figureChild,
-      figureChildProps: ((_ref = figureChild) === null || _ref === void 0 ? void 0 : _ref.props) || {},
+      figureChildProps: (_ref = figureChild) === null || _ref === void 0 ? void 0 : _ref.props,
       contentChild: contentChild,
-      contentChildProps: ((_ref2 = contentChild) === null || _ref2 === void 0 ? void 0 : _ref2.props) || {},
+      contentChildProps: (_ref2 = contentChild) === null || _ref2 === void 0 ? void 0 : _ref2.props,
       actionsChild: actionsChild,
-      actionsChildProps: ((_ref3 = actionsChild) === null || _ref3 === void 0 ? void 0 : _ref3.props) || {},
-      otherChildren: otherChildren
+      actionsChildProps: (_ref3 = actionsChild) === null || _ref3 === void 0 ? void 0 : _ref3.props,
+      otherChildren: otherChildren.filter(function (child) {
+        return !isEmpty(child);
+      })
     };
   }, [children]);
-  var actionsVAlign = Alignment.center;
-  if (orientation === Orientation.horizontal) {
-    actionsVAlign = Alignment.right;
-  }
-  var contentVAlign = Alignment.center;
-  if (orientation === Orientation.horizontal) {
-    contentVAlign = Alignment.left;
-  }
   return React.createElement(FlexBox, _extends({
     ref: ref,
     className: classnames(className, CLASSNAME),
     gap: gap,
     orientation: orientation
-  }, forwardedProps), React.createElement(FlexBox, _extends({
-    ref: (_ref4 = sections.figureChild) === null || _ref4 === void 0 ? void 0 : _ref4.ref
+  }, forwardedProps), (figure || ((_sections$figureChild = sections.figureChildProps) === null || _sections$figureChild === void 0 ? void 0 : _sections$figureChild.children)) && React.createElement(FlexBox, _extends({
+    ref: (_ref4 = sections.figureChild) === null || _ref4 === void 0 ? void 0 : _ref4.ref,
+    vAlign: forwardedProps.vAlign,
+    hAlign: forwardedProps.hAlign
   }, figureProps, sections.figureChildProps, {
-    className: classnames(figureProps === null || figureProps === void 0 ? void 0 : figureProps.className, (_sections$figureChild = sections.figureChildProps) === null || _sections$figureChild === void 0 ? void 0 : _sections$figureChild.className, "".concat(CLASSNAME, "__figure"))
-  }), figure, (_sections$figureChild2 = sections.figureChildProps) === null || _sections$figureChild2 === void 0 ? void 0 : _sections$figureChild2.children), children && React.createElement(FlexBox, _extends({
+    className: classnames(figureProps === null || figureProps === void 0 ? void 0 : figureProps.className, (_sections$figureChild2 = sections.figureChildProps) === null || _sections$figureChild2 === void 0 ? void 0 : _sections$figureChild2.className, "".concat(CLASSNAME, "__figure"))
+  }), figure, (_sections$figureChild3 = sections.figureChildProps) === null || _sections$figureChild3 === void 0 ? void 0 : _sections$figureChild3.children), (((_sections$contentChil = sections.contentChildProps) === null || _sections$contentChil === void 0 ? void 0 : _sections$contentChil.children) || sections.otherChildren.length > 0) && React.createElement(FlexBox, _extends({
     ref: (_ref5 = sections.contentChild) === null || _ref5 === void 0 ? void 0 : _ref5.ref,
     orientation: Orientation.vertical,
     fillSpace: true,
-    vAlign: contentVAlign
+    vAlign: forwardedProps.vAlign,
+    hAlign: forwardedProps.hAlign
   }, contentProps, sections.contentChildProps, {
-    className: classnames(contentProps === null || contentProps === void 0 ? void 0 : contentProps.className, (_sections$contentChil = sections.contentChildProps) === null || _sections$contentChil === void 0 ? void 0 : _sections$contentChil.className, "".concat(CLASSNAME, "__content"))
-  }), (_sections$contentChil2 = sections.contentChildProps) === null || _sections$contentChil2 === void 0 ? void 0 : _sections$contentChil2.children, sections.otherChildren), React.createElement(FlexBox, _extends({
+    className: classnames(contentProps === null || contentProps === void 0 ? void 0 : contentProps.className, (_sections$contentChil2 = sections.contentChildProps) === null || _sections$contentChil2 === void 0 ? void 0 : _sections$contentChil2.className, "".concat(CLASSNAME, "__content"))
+  }), (_sections$contentChil3 = sections.contentChildProps) === null || _sections$contentChil3 === void 0 ? void 0 : _sections$contentChil3.children, sections.otherChildren), (actions || ((_sections$actionsChil = sections.actionsChildProps) === null || _sections$actionsChil === void 0 ? void 0 : _sections$actionsChil.children)) && React.createElement(FlexBox, _extends({
     ref: (_ref6 = sections.actionsChild) === null || _ref6 === void 0 ? void 0 : _ref6.ref,
-    vAlign: actionsVAlign
+    vAlign: forwardedProps.vAlign,
+    hAlign: forwardedProps.hAlign
   }, actionsProps, sections.actionsChildProps, {
-    className: classnames(actionsProps === null || actionsProps === void 0 ? void 0 : actionsProps.className, (_sections$actionsChil = sections.actionsChildProps) === null || _sections$actionsChil === void 0 ? void 0 : _sections$actionsChil.className, "".concat(CLASSNAME, "__actions"))
-  }), actions, (_sections$actionsChil2 = sections.actionsChildProps) === null || _sections$actionsChil2 === void 0 ? void 0 : _sections$actionsChil2.children));
+    className: classnames(actionsProps === null || actionsProps === void 0 ? void 0 : actionsProps.className, (_sections$actionsChil2 = sections.actionsChildProps) === null || _sections$actionsChil2 === void 0 ? void 0 : _sections$actionsChil2.className, "".concat(CLASSNAME, "__actions"))
+  }), actions, (_sections$actionsChil3 = sections.actionsChildProps) === null || _sections$actionsChil3 === void 0 ? void 0 : _sections$actionsChil3.children));
 });
 BaseGenericBlock.displayName = COMPONENT_NAME;
 BaseGenericBlock.className = CLASSNAME;

package/esm/_internal/GenericBlock.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GenericBlock.js","sources":["../../../src/components/generic-block/GenericBlock.tsx"],"sourcesContent":["import React, { Children, forwardRef, ReactElement, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { Comp, getRootClassName, isComponentType, partitionMulti } from '@lumx/react/utils';\nimport { Orientation, Size, FlexBox, FlexBoxProps, Alignment, HorizontalAlignment } from '@lumx/react';\n\nexport interface GenericBlockProps extends FlexBoxProps {\n /*\n Component to use as visual element.\n /\n figure?: ReactNode;\n /\n Actions to set after the main content.\n /\n actions?: ReactNode;\n /\n Main content to display or sections components\n * ({@see GenericBlock.Figure}, {@see GenericBlock.Content} & {@see GenericBlock.Actions})\n /\n children: ReactNode;\n /\n Orientation of the 3 sections\n /\n orientation?: FlexBoxProps['orientation'];\n /\n Horizontal alignment.\n /\n hAlign?: FlexBoxProps['hAlign'];\n /\n Vertical alignment.\n /\n vAlign?: FlexBoxProps['vAlign'];\n /\n The props to forward to the content.\n * By default, the content will have the same alignment as wrapper.\n /\n contentProps?: Omit<FlexBoxProps, 'children'>;\n /\n props to forward to the actions element.\n /\n actionsProps?: Omit<FlexBoxProps, 'children'>;\n /\n props to forward to the figure element.\n /\n figureProps?: Omit<FlexBoxProps, 'children'>;\n}\n\n/\n Component display name.\n /\nconst COMPONENT_NAME = 'GenericBlock';\n\n/\n Component default class name and class prefix.\n /\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/\n Component default props.\n /\nconst DEFAULT_PROPS: Partial<GenericBlockProps> = {\n gap: Size.regular,\n orientation: Orientation.vertical,\n hAlign: Alignment.center,\n vAlign: Alignment.center,\n};\n\ntype BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;\n\ninterface GenericBlock extends BaseGenericBlock {\n /\n Use `GenericBlock.Figure` component as children of the `GenericBlock` component as an alternative way to inject\n * the \"figure\" section of the block (instead of using `figure` and `figureProps` props).\n /\n Figure: Comp<FlexBoxProps>;\n /\n Use `GenericBlock.Content` component as children of the `GenericBlock` component as an alternative way to inject\n * the \"content\" section of the block (instead of using `content` and `contentProps` props).\n /\n Content: Comp<FlexBoxProps>;\n /\n Use `GenericBlock.Actions` component as children of the `GenericBlock` component as an alternative way to inject\n * the \"actions\" section of the block (instead of using `actions` and `actionsProps` props).\n /\n Actions: Comp<FlexBoxProps>;\n}\n\nconst Figure = (() => null) as any;\nconst isFigure = isComponentType(Figure);\n\nconst Content = (() => null) as any;\nconst isContent = isComponentType(Content);\n\nconst Actions = (() => null) as any;\nconst isActions = isComponentType(Actions);\n\n/\n The GenericBlock is a layout component made of 3 sections that can be\n * displayed either horizontally of vertically with the same gap between each section.\n \n The sections are:\n * * (Optional) `Figure` => A visual element to display before the main content.\n * * (Required) `Content` => The main content displayed\n * * (Optional) `Actions` => One or more actions to set after the element.\n \n @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076\n */\nconst BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {\n const {\n className,\n figure,\n figureProps,\n children,\n actions,\n actionsProps,\n gap,\n orientation,\n contentProps,\n ...forwardedProps\n } = props;\n\n const sections = React.useMemo(() => {\n // Split children by section type\n const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(\n Children.toArray(children),\n [isFigure, isContent, isActions],\n );\n return {\n figureChild,\n figureChildProps: (figureChild as ReactElement)?.props \|\| {},\n contentChild,\n contentChildProps: (contentChild as ReactElement)?.props \|\| {},\n actionsChild,\n actionsChildProps: (actionsChild as ReactElement)?.props \|\| {},\n otherChildren,\n };\n }, [children]);\n\n let actionsVAlign: HorizontalAlignment = Alignment.center;\n if (orientation === Orientation.horizontal) {\n actionsVAlign = Alignment.right;\n }\n let contentVAlign: HorizontalAlignment = Alignment.center;\n if (orientation === Orientation.horizontal) {\n contentVAlign = Alignment.left;\n }\n\n return (\n <FlexBox\n ref={ref}\n className={classNames(className, CLASSNAME)}\n gap={gap}\n orientation={orientation}\n {...forwardedProps}\n >\n <FlexBox\n ref={(sections.figureChild as any)?.ref}\n {...figureProps}\n {...sections.figureChildProps}\n className={classNames(\n figureProps?.className,\n sections.figureChildProps?.className,\n `${CLASSNAME}__figure`,\n )}\n >\n {figure}\n {sections.figureChildProps?.children}\n </FlexBox>\n\n {children && (\n <FlexBox\n ref={(sections.contentChild as any)?.ref}\n orientation={Orientation.vertical}\n fillSpace\n vAlign={contentVAlign}\n {...contentProps}\n {...sections.contentChildProps}\n className={classNames(\n contentProps?.className,\n sections.contentChildProps?.className,\n `${CLASSNAME}__content`,\n )}\n >\n {sections.contentChildProps?.children}\n {sections.otherChildren}\n </FlexBox>\n )}\n\n <FlexBox\n ref={(sections.actionsChild as any)?.ref}\n vAlign={actionsVAlign}\n {...actionsProps}\n {...sections.actionsChildProps}\n className={classNames(\n actionsProps?.className,\n sections.actionsChildProps?.className,\n `${CLASSNAME}__actions`,\n )}\n >\n {actions}\n {sections.actionsChildProps?.children}\n </FlexBox>\n </FlexBox>\n );\n});\nBaseGenericBlock.displayName = COMPONENT_NAME;\nBaseGenericBlock.className = CLASSNAME;\nBaseGenericBlock.defaultProps = DEFAULT_PROPS;\n\nexport const GenericBlock: GenericBlock = Object.assign(BaseGenericBlock, { Figure, Content, Actions });\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","gap","Size","regular","orientation","Orientation","vertical","hAlign","Alignment","center","vAlign","Figure","isFigure","isComponentType","Content","isContent","Actions","isActions","BaseGenericBlock","forwardRef","props","ref","className","figure","figureProps","children","actions","actionsProps","contentProps","forwardedProps","sections","React","useMemo","partitionMulti","Children","toArray","figureChild","contentChild","actionsChild","otherChildren","figureChildProps","contentChildProps","actionsChildProps","actionsVAlign","horizontal","right","contentVAlign","left","classNames","displayName","defaultProps","GenericBlock","Object","assign"],"mappings":"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"}
1	+ {"version":3,"file":"GenericBlock.js","sources":["../../../src/components/generic-block/GenericBlock.tsx"],"sourcesContent":["import React, { Children, forwardRef, ReactElement, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\nimport noop from 'lodash/noop';\nimport { Comp, getRootClassName, isComponentType, partitionMulti } from '@lumx/react/utils';\nimport { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';\n\nexport interface GenericBlockProps extends FlexBoxProps {\n /*\n Component to use as visual element.\n /\n figure?: ReactNode;\n /\n Actions to set after the main content.\n /\n actions?: ReactNode;\n /\n Main content to display or sections components\n * ({@see GenericBlock.Figure}, {@see GenericBlock.Content} & {@see GenericBlock.Actions})\n /\n children: ReactNode;\n /\n Orientation of the 3 sections\n /\n orientation?: FlexBoxProps['orientation'];\n /\n Horizontal alignment.\n /\n hAlign?: FlexBoxProps['hAlign'];\n /\n Vertical alignment.\n /\n vAlign?: FlexBoxProps['vAlign'];\n /\n The props to forward to the content.\n * By default, the content will have the same alignment as wrapper.\n /\n contentProps?: Omit<FlexBoxProps, 'children'>;\n /\n props to forward to the actions element.\n /\n actionsProps?: Omit<FlexBoxProps, 'children'>;\n /\n props to forward to the figure element.\n /\n figureProps?: Omit<FlexBoxProps, 'children'>;\n}\n\n/\n Component display name.\n /\nconst COMPONENT_NAME = 'GenericBlock';\n\n/\n Component default class name and class prefix.\n /\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/\n Component default props.\n /\nconst DEFAULT_PROPS: Partial<GenericBlockProps> = {\n gap: Size.big,\n orientation: Orientation.horizontal,\n};\n\ntype BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;\n\ninterface GenericBlock extends BaseGenericBlock {\n /\n Use `GenericBlock.Figure` component as children of the `GenericBlock` component as an alternative way to inject\n * the \"figure\" section of the block (instead of using `figure` and `figureProps` props).\n /\n Figure: Comp<FlexBoxProps>;\n /\n Use `GenericBlock.Content` component as children of the `GenericBlock` component as an alternative way to inject\n * the \"content\" section of the block (instead of using `content` and `contentProps` props).\n /\n Content: Comp<FlexBoxProps>;\n /\n Use `GenericBlock.Actions` component as children of the `GenericBlock` component as an alternative way to inject\n * the \"actions\" section of the block (instead of using `actions` and `actionsProps` props).\n /\n Actions: Comp<FlexBoxProps>;\n}\n\nconst Figure = noop.bind({}) as Comp<FlexBoxProps>;\nconst isFigure = isComponentType(Figure);\n\nconst Content = noop.bind({}) as Comp<FlexBoxProps>;\nconst isContent = isComponentType(Content);\n\nconst Actions = noop.bind({}) as Comp<FlexBoxProps>;\nconst isActions = isComponentType(Actions);\n\n/\n The GenericBlock is a layout component made of 3 sections that can be\n * displayed either horizontally of vertically with the same gap between each section.\n \n The sections are:\n * - `Figure` => A visual element to display before the main content.\n * - `Content` => The main content displayed\n * - `Actions` => One or more actions to set after the element.\n \n @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076\n */\nconst BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {\n const {\n className,\n figure,\n figureProps,\n children,\n actions,\n actionsProps,\n gap,\n orientation,\n contentProps,\n ...forwardedProps\n } = props;\n\n const sections = React.useMemo(() => {\n // Split children by section type\n const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(\n Children.toArray(children),\n [isFigure, isContent, isActions],\n );\n return {\n figureChild,\n figureChildProps: (figureChild as ReactElement)?.props,\n contentChild,\n contentChildProps: (contentChild as ReactElement)?.props,\n actionsChild,\n actionsChildProps: (actionsChild as ReactElement)?.props,\n otherChildren: otherChildren.filter((child) => !isEmpty(child)),\n };\n }, [children]);\n\n return (\n <FlexBox\n ref={ref}\n className={classNames(className, CLASSNAME)}\n gap={gap}\n orientation={orientation}\n {...forwardedProps}\n >\n {(figure \|\| sections.figureChildProps?.children) && (\n <FlexBox\n ref={(sections.figureChild as any)?.ref}\n vAlign={forwardedProps.vAlign}\n hAlign={forwardedProps.hAlign}\n {...figureProps}\n {...sections.figureChildProps}\n className={classNames(\n figureProps?.className,\n sections.figureChildProps?.className,\n `${CLASSNAME}__figure`,\n )}\n >\n {figure}\n {sections.figureChildProps?.children}\n </FlexBox>\n )}\n\n {(sections.contentChildProps?.children \|\| sections.otherChildren.length > 0) && (\n <FlexBox\n ref={(sections.contentChild as any)?.ref}\n orientation={Orientation.vertical}\n fillSpace\n vAlign={forwardedProps.vAlign}\n hAlign={forwardedProps.hAlign}\n {...contentProps}\n {...sections.contentChildProps}\n className={classNames(\n contentProps?.className,\n sections.contentChildProps?.className,\n `${CLASSNAME}__content`,\n )}\n >\n {sections.contentChildProps?.children}\n {sections.otherChildren}\n </FlexBox>\n )}\n\n {(actions \|\| sections.actionsChildProps?.children) && (\n <FlexBox\n ref={(sections.actionsChild as any)?.ref}\n vAlign={forwardedProps.vAlign}\n hAlign={forwardedProps.hAlign}\n {...actionsProps}\n {...sections.actionsChildProps}\n className={classNames(\n actionsProps?.className,\n sections.actionsChildProps?.className,\n `${CLASSNAME}__actions`,\n )}\n >\n {actions}\n {sections.actionsChildProps?.children}\n </FlexBox>\n )}\n </FlexBox>\n );\n});\nBaseGenericBlock.displayName = COMPONENT_NAME;\nBaseGenericBlock.className = CLASSNAME;\nBaseGenericBlock.defaultProps = DEFAULT_PROPS;\n\nexport const GenericBlock: GenericBlock = Object.assign(BaseGenericBlock, { Figure, Content, Actions });\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","gap","Size","big","orientation","Orientation","horizontal","Figure","noop","bind","isFigure","isComponentType","Content","isContent","Actions","isActions","BaseGenericBlock","forwardRef","props","ref","className","figure","figureProps","children","actions","actionsProps","contentProps","forwardedProps","sections","React","useMemo","partitionMulti","Children","toArray","figureChild","contentChild","actionsChild","otherChildren","figureChildProps","contentChildProps","actionsChildProps","filter","child","isEmpty","classNames","vAlign","hAlign","length","vertical","displayName","defaultProps","GenericBlock","Object","assign"],"mappings":";;;;;;;;;;;;AAgDA;;;AAGA,IAAMA,cAAc,GAAG,cAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAyC,GAAG;AAC9CC,EAAAA,GAAG,EAAEC,IAAI,CAACC,GADoC;AAE9CC,EAAAA,WAAW,EAAEC,WAAW,CAACC;AAFqB,CAAlD;AAyBA,IAAMC,MAAM,GAAGC,IAAI,CAACC,IAAL,CAAU,EAAV,CAAf;AACA,IAAMC,QAAQ,GAAGC,eAAe,CAACJ,MAAD,CAAhC;AAEA,IAAMK,OAAO,GAAGJ,IAAI,CAACC,IAAL,CAAU,EAAV,CAAhB;AACA,IAAMI,SAAS,GAAGF,eAAe,CAACC,OAAD,CAAjC;AAEA,IAAME,OAAO,GAAGN,IAAI,CAACC,IAAL,CAAU,EAAV,CAAhB;AACA,IAAMM,SAAS,GAAGJ,eAAe,CAACG,OAAD,CAAjC;AAEA;;;;;;;;;;;;AAWA,IAAME,gBAAkC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA;;AAAA,MAE9DC,SAF8D,GAY9DF,KAZ8D,CAE9DE,SAF8D;AAAA,MAG9DC,MAH8D,GAY9DH,KAZ8D,CAG9DG,MAH8D;AAAA,MAI9DC,WAJ8D,GAY9DJ,KAZ8D,CAI9DI,WAJ8D;AAAA,MAK9DC,QAL8D,GAY9DL,KAZ8D,CAK9DK,QAL8D;AAAA,MAM9DC,OAN8D,GAY9DN,KAZ8D,CAM9DM,OAN8D;AAAA,MAO9DC,YAP8D,GAY9DP,KAZ8D,CAO9DO,YAP8D;AAAA,MAQ9DxB,GAR8D,GAY9DiB,KAZ8D,CAQ9DjB,GAR8D;AAAA,MAS9DG,WAT8D,GAY9Dc,KAZ8D,CAS9Dd,WAT8D;AAAA,MAU9DsB,YAV8D,GAY9DR,KAZ8D,CAU9DQ,YAV8D;AAAA,MAW3DC,cAX2D,4BAY9DT,KAZ8D;;AAclE,MAAMU,QAAQ,GAAGC,KAAK,CAACC,OAAN,CAAc,YAAM;AAAA;;AACjC;AADiC,0BAEyCC,cAAc,CACpFC,QAAQ,CAACC,OAAT,CAAiBV,QAAjB,CADoF,EAEpF,CAACb,QAAD,EAAWG,SAAX,EAAsBE,SAAtB,CAFoF,CAFvD;AAAA;AAAA;AAAA,QAEzBmB,WAFyB;AAAA;AAAA,QAEVC,YAFU;AAAA;AAAA,QAEMC,YAFN;AAAA,QAEwBC,aAFxB;;AAMjC,WAAO;AACHH,MAAAA,WAAW,EAAXA,WADG;AAEHI,MAAAA,gBAAgB,UAAGJ,WAAH,yCAAE,KAA+BhB,KAF9C;AAGHiB,MAAAA,YAAY,EAAZA,YAHG;AAIHI,MAAAA,iBAAiB,WAAGJ,YAAH,0CAAE,MAAgCjB,KAJhD;AAKHkB,MAAAA,YAAY,EAAZA,YALG;AAMHI,MAAAA,iBAAiB,WAAGJ,YAAH,0CAAE,MAAgClB,KANhD;AAOHmB,MAAAA,aAAa,EAAEA,aAAa,CAACI,MAAd,CAAqB,UAACC,KAAD;AAAA,eAAW,CAACC,OAAO,CAACD,KAAD,CAAnB;AAAA,OAArB;AAPZ,KAAP;AASH,GAfgB,EAed,CAACnB,QAAD,CAfc,CAAjB;AAiBA,SACI,oBAAC,OAAD;AACI,IAAA,GAAG,EAAEJ,GADT;AAEI,IAAA,SAAS,EAAEyB,UAAU,CAACxB,SAAD,EAAYtB,SAAZ,CAFzB;AAGI,IAAA,GAAG,EAAEG,GAHT;AAII,IAAA,WAAW,EAAEG;AAJjB,KAKQuB,cALR,GAOK,CAACN,MAAM,8BAAIO,QAAQ,CAACU,gBAAb,0DAAI,sBAA2Bf,QAA/B,CAAP,KACG,oBAAC,OAAD;AACI,IAAA,GAAG,WAAGK,QAAQ,CAACM,WAAZ,0CAAE,MAA+Bf,GADxC;AAEI,IAAA,MAAM,EAAEQ,cAAc,CAACkB,MAF3B;AAGI,IAAA,MAAM,EAAElB,cAAc,CAACmB;AAH3B,KAIQxB,WAJR,EAKQM,QAAQ,CAACU,gBALjB;AAMI,IAAA,SAAS,EAAEM,UAAU,CACjBtB,WADiB,aACjBA,WADiB,uBACjBA,WAAW,CAAEF,SADI,4BAEjBQ,QAAQ,CAACU,gBAFQ,2DAEjB,uBAA2BlB,SAFV,YAGdtB,SAHc;AANzB,MAYKuB,MAZL,4BAaKO,QAAQ,CAACU,gBAbd,2DAaK,uBAA2Bf,QAbhC,CARR,EAyBK,CAAC,0BAAAK,QAAQ,CAACW,iBAAT,gFAA4BhB,QAA5B,KAAwCK,QAAQ,CAACS,aAAT,CAAuBU,MAAvB,GAAgC,CAAzE,KACG,oBAAC,OAAD;AACI,IAAA,GAAG,WAAGnB,QAAQ,CAACO,YAAZ,0CAAE,MAAgChB,GADzC;AAEI,IAAA,WAAW,EAAEd,WAAW,CAAC2C,QAF7B;AAGI,IAAA,SAAS,MAHb;AAII,IAAA,MAAM,EAAErB,cAAc,CAACkB,MAJ3B;AAKI,IAAA,MAAM,EAAElB,cAAc,CAACmB;AAL3B,KAMQpB,YANR,EAOQE,QAAQ,CAACW,iBAPjB;AAQI,IAAA,SAAS,EAAEK,UAAU,CACjBlB,YADiB,aACjBA,YADiB,uBACjBA,YAAY,CAAEN,SADG,4BAEjBQ,QAAQ,CAACW,iBAFQ,2DAEjB,uBAA4BnB,SAFX,YAGdtB,SAHc;AARzB,gCAcK8B,QAAQ,CAACW,iBAdd,2DAcK,uBAA4BhB,QAdjC,EAeKK,QAAQ,CAACS,aAfd,CA1BR,EA6CK,CAACb,OAAO,8BAAII,QAAQ,CAACY,iBAAb,0DAAI,sBAA4BjB,QAAhC,CAAR,KACG,oBAAC,OAAD;AACI,IAAA,GAAG,WAAGK,QAAQ,CAACQ,YAAZ,0CAAE,MAAgCjB,GADzC;AAEI,IAAA,MAAM,EAAEQ,cAAc,CAACkB,MAF3B;AAGI,IAAA,MAAM,EAAElB,cAAc,CAACmB;AAH3B,KAIQrB,YAJR,EAKQG,QAAQ,CAACY,iBALjB;AAMI,IAAA,SAAS,EAAEI,UAAU,CACjBnB,YADiB,aACjBA,YADiB,uBACjBA,YAAY,CAAEL,SADG,4BAEjBQ,QAAQ,CAACY,iBAFQ,2DAEjB,uBAA4BpB,SAFX,YAGdtB,SAHc;AANzB,MAYK0B,OAZL,4BAaKI,QAAQ,CAACY,iBAbd,2DAaK,uBAA4BjB,QAbjC,CA9CR,CADJ;AAiEH,CAhGoD,CAArD;AAiGAP,gBAAgB,CAACiC,WAAjB,GAA+BpD,cAA/B;AACAmB,gBAAgB,CAACI,SAAjB,GAA6BtB,SAA7B;AACAkB,gBAAgB,CAACkC,YAAjB,GAAgClD,aAAhC;IAEamD,YAA0B,GAAGC,MAAM,CAACC,MAAP,CAAcrC,gBAAd,EAAgC;AAAET,EAAAA,MAAM,EAANA,MAAF;AAAUK,EAAAA,OAAO,EAAPA,OAAV;AAAmBE,EAAAA,OAAO,EAAPA;AAAnB,CAAhC;;;;"}

package/esm/_internal/Link2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Link2.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useMemo } from 'react';\n\nimport isEmpty from 'lodash/isEmpty';\n\nimport classNames from 'classnames';\n\nimport { Color, ColorVariant, Icon, Size, Typography, ~~TypographyInterface, TypographyTitleCustom~~ } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { renderLink } from '@lumx/react/utils/renderLink';\n\ntype HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n\n/*\n Defines the props of the component.\n /\nexport interface LinkProps extends GenericProps {\n /* Color variant. /\n color?: Color;\n /* Lightened or darkened variant of the selected icon color. /\n colorVariant?: ColorVariant;\n /* Link href. /\n href?: HTMLAnchorProps['href'];\n /* Whether the component is disabled or not. /\n isDisabled?: boolean;\n /* Left icon (SVG path). /\n leftIcon?: string;\n /* Custom react component for the link (can be used to inject react router Link). /\n linkAs?: 'a' \| any;\n /* Right icon (SVG path). /\n rightIcon?: string;\n /* Link target. /\n target?: HTMLAnchorProps['target'];\n /* Typography variant. /\n typography?: ~~TypographyInterface \| TypographyTitleCustom~~;\n}\n\n/\n Component display name.\n /\nconst COMPONENT_NAME = 'Link';\n\n/\n Component default class name and class prefix.\n /\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nconst getIconSize = (typography?: Typography) => {\n switch (typography) {\n case Typography.display1:\n return Size.m;\n\n case Typography.headline:\n case Typography.title:\n case Typography.custom.title1:\n case Typography.custom.title2:\n case Typography.custom.title3:\n case Typography.custom.title4:\n case Typography.custom.title5:\n case Typography.custom.title6:\n case Typography.body2:\n case Typography.subtitle2:\n return Size.s;\n\n case Typography.body1:\n case Typography.subtitle1:\n return Size.xs;\n\n case Typography.caption:\n case Typography.overline:\n return Size.xxs;\n\n default:\n return Size.s;\n }\n};\n\n/\n Link component.\n \n @param props Component props.\n * @param ref Component ref.\n * @return React element.\n /\nexport const Link: Comp<LinkProps, HTMLAnchorElement \| HTMLButtonElement> = forwardRef((props, ref) => {\n const {\n children,\n className,\n color,\n colorVariant,\n disabled,\n isDisabled = disabled,\n href,\n leftIcon,\n linkAs,\n rightIcon,\n target,\n typography,\n ...forwardedProps\n } = props;\n const renderedChildren = useMemo(\n () => (\n <>\n {leftIcon && !isEmpty(leftIcon) && (\n <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} size={getIconSize(typography)} />\n )}\n\n {children && (\n <span\n className={classNames(`${CLASSNAME}__content`, {\n [`lumx-typography-${typography}`]: typography,\n })}\n >\n {children}\n </span>\n )}\n\n {rightIcon && !isEmpty(rightIcon) && (\n <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} size={getIconSize(typography)} />\n )}\n </>\n ),\n [leftIcon, typography, children, rightIcon],\n );\n\n /\n If there is no linkAs prop and no href, we returned a <button> instead of a <a>.\n * If the component is disabled, we also returned a <button> since disabled is not compatible with <a>.\n */\n if ((!linkAs && isEmpty(href)) \|\| isDisabled) {\n return (\n <button\n type=\"button\"\n {...forwardedProps}\n ref={ref as RefObject<HTMLButtonElement>}\n disabled={isDisabled}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant }))}\n >\n {renderedChildren}\n </button>\n );\n }\n return renderLink(\n {\n linkAs,\n ...forwardedProps,\n href,\n target,\n className: classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant })),\n ref: ref as RefObject<HTMLAnchorElement>,\n },\n renderedChildren,\n );\n});\nLink.displayName = COMPONENT_NAME;\nLink.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","getIconSize","typography","Typography","display1","Size","m","headline","title","custom","title1","title2","title3","title4","title5","title6","body2","subtitle2","s","body1","subtitle1","xs","caption","overline","xxs","Link","forwardRef","props","ref","children","className","color","colorVariant","disabled","isDisabled","href","leftIcon","linkAs","rightIcon","target","forwardedProps","renderedChildren","useMemo","isEmpty","classNames","handleBasicClasses","prefix","renderLink","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"Link2.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useMemo } from 'react';\n\nimport isEmpty from 'lodash/isEmpty';\n\nimport classNames from 'classnames';\n\nimport { Color, ColorVariant, Icon, Size, Typography } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { renderLink } from '@lumx/react/utils/renderLink';\n\ntype HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n\n/*\n Defines the props of the component.\n /\nexport interface LinkProps extends GenericProps {\n /* Color variant. /\n color?: Color;\n /* Lightened or darkened variant of the selected icon color. /\n colorVariant?: ColorVariant;\n /* Link href. /\n href?: HTMLAnchorProps['href'];\n /* Whether the component is disabled or not. /\n isDisabled?: boolean;\n /* Left icon (SVG path). /\n leftIcon?: string;\n /* Custom react component for the link (can be used to inject react router Link). /\n linkAs?: 'a' \| any;\n /* Right icon (SVG path). /\n rightIcon?: string;\n /* Link target. /\n target?: HTMLAnchorProps['target'];\n /* Typography variant. /\n typography?: Typography;\n}\n\n/\n Component display name.\n /\nconst COMPONENT_NAME = 'Link';\n\n/\n Component default class name and class prefix.\n /\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nconst getIconSize = (typography?: Typography) => {\n switch (typography) {\n case Typography.display1:\n return Size.m;\n\n case Typography.headline:\n case Typography.title:\n case Typography.custom.title1:\n case Typography.custom.title2:\n case Typography.custom.title3:\n case Typography.custom.title4:\n case Typography.custom.title5:\n case Typography.custom.title6:\n case Typography.body2:\n case Typography.subtitle2:\n return Size.s;\n\n case Typography.body1:\n case Typography.subtitle1:\n return Size.xs;\n\n case Typography.caption:\n case Typography.overline:\n return Size.xxs;\n\n default:\n return Size.s;\n }\n};\n\n/\n Link component.\n \n @param props Component props.\n * @param ref Component ref.\n * @return React element.\n /\nexport const Link: Comp<LinkProps, HTMLAnchorElement \| HTMLButtonElement> = forwardRef((props, ref) => {\n const {\n children,\n className,\n color,\n colorVariant,\n disabled,\n isDisabled = disabled,\n href,\n leftIcon,\n linkAs,\n rightIcon,\n target,\n typography,\n ...forwardedProps\n } = props;\n const renderedChildren = useMemo(\n () => (\n <>\n {leftIcon && !isEmpty(leftIcon) && (\n <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} size={getIconSize(typography)} />\n )}\n\n {children && (\n <span\n className={classNames(`${CLASSNAME}__content`, {\n [`lumx-typography-${typography}`]: typography,\n })}\n >\n {children}\n </span>\n )}\n\n {rightIcon && !isEmpty(rightIcon) && (\n <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} size={getIconSize(typography)} />\n )}\n </>\n ),\n [leftIcon, typography, children, rightIcon],\n );\n\n /\n If there is no linkAs prop and no href, we returned a <button> instead of a <a>.\n * If the component is disabled, we also returned a <button> since disabled is not compatible with <a>.\n */\n if ((!linkAs && isEmpty(href)) \|\| isDisabled) {\n return (\n <button\n type=\"button\"\n {...forwardedProps}\n ref={ref as RefObject<HTMLButtonElement>}\n disabled={isDisabled}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant }))}\n >\n {renderedChildren}\n </button>\n );\n }\n return renderLink(\n {\n linkAs,\n ...forwardedProps,\n href,\n target,\n className: classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant })),\n ref: ref as RefObject<HTMLAnchorElement>,\n },\n renderedChildren,\n );\n});\nLink.displayName = COMPONENT_NAME;\nLink.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","getIconSize","typography","Typography","display1","Size","m","headline","title","custom","title1","title2","title3","title4","title5","title6","body2","subtitle2","s","body1","subtitle1","xs","caption","overline","xxs","Link","forwardRef","props","ref","children","className","color","colorVariant","disabled","isDisabled","href","leftIcon","linkAs","rightIcon","target","forwardedProps","renderedChildren","useMemo","isEmpty","classNames","handleBasicClasses","prefix","renderLink","displayName"],"mappings":"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"}

package/esm/_internal/Thumbnail2.js CHANGED Viewed

@@ -50,23 +50,27 @@ function useImageLoad(imageURL, imgRef) {
 }
 // Calculate shift to center the focus point in the container.
-function shiftPosition(scale, focusPoint, imageSize, containerSize) {
+function shiftPosition(_ref) {
+  var scale = _ref.scale,
+      focusPoint = _ref.focusPoint,
+      imageSize = _ref.imageSize,
+      containerSize = _ref.containerSize;
+  if (imageSize === containerSize) return 0;
   var scaledSize = imageSize / scale;
   var scaledFocusHeight = focusPoint * scaledSize;
   var startFocus = scaledFocusHeight - containerSize / 2;
   var shift = startFocus / (scaledSize - containerSize);
   return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
 }
 // Compute CSS properties to apply the focus point.
-var useFocusPointStyle = function useFocusPointStyle(_ref, element, isLoaded) {
-  var image = _ref.image,
-      aspectRatio = _ref.aspectRatio,
-      focusPoint = _ref.focusPoint,
-      _ref$imgProps = _ref.imgProps;
-  _ref$imgProps = _ref$imgProps === void 0 ? {} : _ref$imgProps;
-  var width = _ref$imgProps.width,
-      height = _ref$imgProps.height;
+var useFocusPointStyle = function useFocusPointStyle(_ref2, element, isLoaded) {
+  var image = _ref2.image,
+      aspectRatio = _ref2.aspectRatio,
+      focusPoint = _ref2.focusPoint,
+      _ref2$imgProps = _ref2.imgProps;
+  _ref2$imgProps = _ref2$imgProps === void 0 ? {} : _ref2$imgProps;
+  var width = _ref2$imgProps.width,
+      height = _ref2$imgProps.height;
   // Get natural image size from imgProps or img element.
   var imageSize = useMemo(function () {
     // Focus point is not applicable => exit early
@@ -135,10 +139,20 @@ var useFocusPointStyle = function useFocusPointStyle(_ref, element, isLoaded) {
     var scale = Math.min(widthScale, heightScale); // Focus Y relative to the top (instead of the center)
     var focusPointFromTop = Math.abs(((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y) || 0) - 1) / 2;
-    var y = shiftPosition(scale, focusPointFromTop, imageSize.height, containerSize.height); // Focus X relative to the left (instead of the center)
+    var y = shiftPosition({
+      scale: scale,
+      focusPoint: focusPointFromTop,
+      imageSize: imageSize.height,
+      containerSize: containerSize.height
+    }); // Focus X relative to the left (instead of the center)
     var focusPointFromLeft = Math.abs(((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x) || 0) + 1) / 2;
-    var x = shiftPosition(scale, focusPointFromLeft, imageSize.width, containerSize.width);
+    var x = shiftPosition({
+      scale: scale,
+      focusPoint: focusPointFromLeft,
+      imageSize: imageSize.width,
+      containerSize: containerSize.width
+    });
     var objectPosition = "".concat(x, "% ").concat(y, "%"); // Update only if needed.
     setStyle(function (oldStyle) {

package/esm/_internal/Thumbnail2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Thumbnail2.js","sources":["../../../src/components/thumbnail/useImageLoad.ts","../../../src/components/thumbnail/useFocusPointStyle.tsx","../../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type LoadingState = 'isLoading' \| 'isLoaded' \| 'hasError';\n\nfunction getState(img: HTMLImageElement \| null \| undefined, event?: Event) {\n // Error event occurred or image loaded empty.\n if (event?.type === 'error' \|\| (img?.complete && (img?.naturalWidth === 0 \|\| img?.naturalHeight === 0))) {\n return 'hasError';\n }\n // Image is undefined or incomplete.\n if (!img \|\| !img.complete) {\n return 'isLoading';\n }\n // Else loaded.\n return 'isLoaded';\n}\n\nexport function useImageLoad(imageURL: string, imgRef?: HTMLImageElement): LoadingState {\n const [state, setState] = useState<LoadingState>(getState(imgRef));\n\n // Update state when changing image URL or DOM reference.\n useEffect(() => {\n setState(getState(imgRef));\n }, [imageURL, imgRef]);\n\n // Listen to `load` and `error` event on image\n useEffect(() => {\n const img = imgRef;\n if (!img) return undefined;\n const update = (event?: Event) => setState(getState(img, event));\n img.addEventListener('load', update);\n img.addEventListener('error', update);\n return () => {\n img.removeEventListener('load', update);\n img.removeEventListener('error', update);\n };\n }, [imgRef, imgRef?.src]);\n\n return state;\n}\n","import { CSSProperties, useEffect, useMemo, useState } from 'react';\nimport { AspectRatio } from '@lumx/react/components';\nimport { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';\n\n// Calculate shift to center the focus point in the container.\nfunction shiftPosition(scale: number, focusPoint: number, imageSize: number, containerSize: number) {\n const scaledSize = imageSize / scale;\n const scaledFocusHeight = focusPoint * scaledSize;\n const startFocus = scaledFocusHeight - containerSize / 2;\n const shift = startFocus / (scaledSize - containerSize);\n return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);\n}\n\ntype Size = { width: number; height: number };\n\n// Compute CSS properties to apply the focus point.\nexport const useFocusPointStyle = (\n { image, aspectRatio, focusPoint, imgProps: { width, height } = {} }: ThumbnailProps,\n element: HTMLImageElement \| undefined,\n isLoaded: boolean,\n): CSSProperties => {\n // Get natural image size from imgProps or img element.\n const imageSize: Size \| undefined = useMemo(() => {\n // Focus point is not applicable => exit early\n if (!image \|\| aspectRatio === AspectRatio.original \|\| (!focusPoint?.x && !focusPoint?.y)) return undefined;\n if (typeof width === 'number' && typeof height === 'number') return { width, height };\n if (element && isLoaded) return { width: element.naturalWidth, height: element.naturalHeight };\n return undefined;\n }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);\n\n // Get container size (dependant on imageSize).\n const [containerSize, setContainerSize] = useState<Size \| undefined>(undefined);\n useEffect(\n function updateContainerSize() {\n const cWidth = element?.offsetWidth;\n const cHeight = element?.offsetHeight;\n if (cWidth && cHeight) {\n // Update only if needed.\n setContainerSize((oldContainerSize) =>\n oldContainerSize?.width === cWidth && oldContainerSize.height === cHeight\n ? oldContainerSize\n : { width: cWidth, height: cHeight },\n );\n } else if (imageSize) {\n // Wait for a render (in case the container size is dependent on the image size).\n requestAnimationFrame(updateContainerSize);\n }\n },\n [element?.offsetHeight, element?.offsetWidth, imageSize],\n );\n\n // Compute style.\n const [style, setStyle] = useState<CSSProperties>({});\n useEffect(() => {\n // Focus point is not applicable => exit early\n if (!image \|\| aspectRatio === AspectRatio.original \|\| (!focusPoint?.x && !focusPoint?.y)) {\n return;\n }\n if (!element \|\| !imageSize) {\n // Focus point can be computed but now right now (image size unknown).\n setStyle({ visibility: 'hidden' });\n return;\n }\n if (!containerSize) {\n // Missing container size abort focus point compute.\n setStyle({});\n return;\n }\n\n const heightScale = imageSize.height / containerSize.height;\n const widthScale = imageSize.width / containerSize.width;\n const scale = Math.min(widthScale, heightScale);\n\n // Focus Y relative to the top (instead of the center)\n const focusPointFromTop = Math.abs((focusPoint?.y \|\| 0) - 1) / 2;\n const y = shiftPosition(scale, focusPointFromTop, imageSize.height, containerSize.height);\n\n // Focus X relative to the left (instead of the center)\n const focusPointFromLeft = Math.abs((focusPoint?.x \|\| 0) + 1) / 2;\n const x = shiftPosition(scale, focusPointFromLeft, imageSize.width, containerSize.width);\n\n const objectPosition = `${x}% ${y}%`;\n\n // Update only if needed.\n setStyle((oldStyle) => (oldStyle.objectPosition === objectPosition ? oldStyle : { objectPosition }));\n }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);\n\n return style;\n};\n","import React, {\n CSSProperties,\n forwardRef,\n ImgHTMLAttributes,\n KeyboardEventHandler,\n MouseEventHandler,\n ReactElement,\n ReactNode,\n Ref,\n useState,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react';\n\nimport { Comp, Falsy, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';\n\nimport { mdiImageBroken } from '@lumx/icons';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';\nimport { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';\nimport { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';\n\ntype ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;\n\n/*\n Defines the props of the component.\n /\nexport interface ThumbnailProps extends GenericProps, HasTheme {\n /* Alignment of the thumbnail in it's parent (requires flex parent). /\n align?: HorizontalAlignment;\n /* Image alternative text. /\n alt: string;\n /* Image aspect ratio. /\n aspectRatio?: AspectRatio;\n /* Badge. /\n badge?: ReactElement \| Falsy;\n /* Image cross origin resource policy. /\n crossOrigin?: ImgHTMLProps['crossOrigin'];\n /* Fallback icon (SVG path) or react node when image fails to load. /\n fallback?: string \| ReactNode;\n /* Whether the thumbnail should fill it's parent size (requires flex parent) or not. /\n fillHeight?: boolean;\n /* Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. /\n focusPoint?: FocusPoint;\n /* Image URL. /\n image: string;\n /* Props to inject into the native <img> element. /\n imgProps?: ImgHTMLProps;\n /* Reference to the native <img> element. /\n imgRef?: Ref<HTMLImageElement>;\n /* Set to true to force the display of the loading skeleton. /\n isLoading?: boolean;\n /* Size variant of the component. /\n size?: ThumbnailSize;\n /* Image loading mode. /\n loading?: ImgHTMLProps['loading'];\n /* On click callback. /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /* On key press callback. /\n onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n /* Variant of the component. /\n variant?: ThumbnailVariant;\n /* Props to pass to the link wrapping the thumbnail. /\n linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n /* Custom react component for the link (can be used to inject react router Link). /\n linkAs?: 'a' \| any;\n}\n\n/\n Component display name.\n /\nconst COMPONENT_NAME = 'Thumbnail';\n\n/\n Component default class name and class prefix.\n /\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/\n Component default props.\n /\nconst DEFAULT_PROPS: Partial<ThumbnailProps> = {\n fallback: mdiImageBroken,\n loading: 'lazy',\n theme: Theme.light,\n};\n\n/\n Thumbnail component.\n \n @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {\n const {\n align,\n alt,\n aspectRatio = AspectRatio.original,\n badge,\n className,\n crossOrigin,\n fallback,\n fillHeight,\n // `focusPoint` needs to be here to remove it from `forwardedProps`.\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n focusPoint,\n image,\n imgProps,\n imgRef: propImgRef,\n isLoading: isLoadingProp,\n loading,\n size,\n theme,\n variant,\n linkProps,\n linkAs,\n ...forwardedProps\n } = props;\n const [imgElement, setImgElement] = useState<HTMLImageElement>();\n\n // Image loading state.\n const loadingState = useImageLoad(image, imgElement);\n const isLoaded = loadingState === 'isLoaded';\n const isLoading = isLoadingProp \|\| loadingState === 'isLoading';\n const hasError = loadingState === 'hasError';\n\n // Focus point.\n const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);\n\n const hasIconErrorFallback = hasError && typeof fallback === 'string';\n const hasCustomErrorFallback = hasError && !hasIconErrorFallback;\n const imageErrorStyle: CSSProperties = {};\n if (hasIconErrorFallback) {\n // Keep the image layout on icon fallback.\n imageErrorStyle.visibility = 'hidden';\n } else if (hasCustomErrorFallback) {\n // Remove the image on custom fallback.\n imageErrorStyle.display = 'none';\n }\n\n const isLink = Boolean(linkProps?.href \|\| linkAs);\n const isButton = !!forwardedProps.onClick;\n const isClickable = isButton \|\| isLink;\n\n let Wrapper: any = 'div';\n const wrapperProps = { ...forwardedProps };\n if (isLink) {\n Wrapper = linkAs \|\| 'a';\n Object.assign(wrapperProps, linkProps);\n } else if (isButton) {\n Wrapper = 'button';\n wrapperProps.type = forwardedProps.type \|\| 'button';\n wrapperProps['aria-label'] = forwardedProps['aria-label'] \|\| alt;\n }\n\n return (\n <Wrapper\n {...wrapperProps}\n ref={ref}\n className={classNames(\n linkProps?.className,\n className,\n handleBasicClasses({\n align,\n aspectRatio,\n prefix: CLASSNAME,\n size,\n theme,\n variant,\n isClickable,\n hasError,\n hasIconErrorFallback,\n hasCustomErrorFallback,\n isLoading,\n hasBadge: !!badge,\n }),\n fillHeight && `${CLASSNAME}--fill-height`,\n )}\n >\n <div className={`${CLASSNAME}__background`}>\n <img\n {...imgProps}\n style={{\n ...imgProps?.style,\n ...imageErrorStyle,\n ...focusPointStyle,\n }}\n ref={mergeRefs(setImgElement, propImgRef)}\n className={classNames(\n handleBasicClasses({\n prefix: `${CLASSNAME}__image`,\n isLoading,\n hasDefinedSize: Boolean(imgProps?.height && imgProps.width),\n }),\n imgProps?.className,\n )}\n crossOrigin={crossOrigin}\n src={image}\n alt={alt}\n loading={loading}\n />\n {!isLoading && hasError && (\n <div className={`${CLASSNAME}__fallback`}>\n {hasIconErrorFallback ? (\n <Icon icon={fallback as string} size={Size.xxs} theme={theme} />\n ) : (\n fallback\n )}\n </div>\n )}\n </div>\n {badge &&\n React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}\n </Wrapper>\n );\n});\nThumbnail.displayName = COMPONENT_NAME;\nThumbnail.className = CLASSNAME;\nThumbnail.defaultProps = DEFAULT_PROPS;\n"],"names":["getState","img","event","type","complete","naturalWidth","naturalHeight","useImageLoad","imageURL","imgRef","useState","state","setState","useEffect","undefined","update","addEventListener","removeEventListener","src","shiftPosition","scale","focusPoint","imageSize","containerSize","scaledSize","scaledFocusHeight","startFocus","shift","Math","floor","max","min","useFocusPointStyle","element","isLoaded","image","aspectRatio","imgProps","width","height","useMemo","AspectRatio","original","x","y","setContainerSize","updateContainerSize","cWidth","offsetWidth","cHeight","offsetHeight","oldContainerSize","requestAnimationFrame","style","setStyle","visibility","heightScale","widthScale","focusPointFromTop","abs","focusPointFromLeft","objectPosition","oldStyle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","mdiImageBroken","loading","theme","Theme","light","Thumbnail","forwardRef","props","ref","align","alt","badge","className","crossOrigin","fillHeight","propImgRef","isLoadingProp","isLoading","size","variant","linkProps","linkAs","forwardedProps","imgElement","setImgElement","loadingState","hasError","focusPointStyle","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","display","isLink","Boolean","href","isButton","onClick","isClickable","Wrapper","wrapperProps","Object","assign","classNames","handleBasicClasses","prefix","hasBadge","mergeRefs","hasDefinedSize","Size","xxs","React","cloneElement","displayName","defaultProps"],"mappings":"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"}
1	+ {"version":3,"file":"Thumbnail2.js","sources":["../../../src/components/thumbnail/useImageLoad.ts","../../../src/components/thumbnail/useFocusPointStyle.tsx","../../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type LoadingState = 'isLoading' \| 'isLoaded' \| 'hasError';\n\nfunction getState(img: HTMLImageElement \| null \| undefined, event?: Event) {\n // Error event occurred or image loaded empty.\n if (event?.type === 'error' \|\| (img?.complete && (img?.naturalWidth === 0 \|\| img?.naturalHeight === 0))) {\n return 'hasError';\n }\n // Image is undefined or incomplete.\n if (!img \|\| !img.complete) {\n return 'isLoading';\n }\n // Else loaded.\n return 'isLoaded';\n}\n\nexport function useImageLoad(imageURL: string, imgRef?: HTMLImageElement): LoadingState {\n const [state, setState] = useState<LoadingState>(getState(imgRef));\n\n // Update state when changing image URL or DOM reference.\n useEffect(() => {\n setState(getState(imgRef));\n }, [imageURL, imgRef]);\n\n // Listen to `load` and `error` event on image\n useEffect(() => {\n const img = imgRef;\n if (!img) return undefined;\n const update = (event?: Event) => setState(getState(img, event));\n img.addEventListener('load', update);\n img.addEventListener('error', update);\n return () => {\n img.removeEventListener('load', update);\n img.removeEventListener('error', update);\n };\n }, [imgRef, imgRef?.src]);\n\n return state;\n}\n","import { CSSProperties, useEffect, useMemo, useState } from 'react';\nimport { AspectRatio } from '@lumx/react/components';\nimport { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';\n\n// Calculate shift to center the focus point in the container.\nexport function shiftPosition({\n scale,\n focusPoint,\n imageSize,\n containerSize,\n}: {\n scale: number;\n focusPoint: number;\n imageSize: number;\n containerSize: number;\n}) {\n if (imageSize === containerSize) return 0;\n const scaledSize = imageSize / scale;\n\n const scaledFocusHeight = focusPoint * scaledSize;\n const startFocus = scaledFocusHeight - containerSize / 2;\n const shift = startFocus / (scaledSize - containerSize);\n\n return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);\n}\n\ntype Size = { width: number; height: number };\n\n// Compute CSS properties to apply the focus point.\nexport const useFocusPointStyle = (\n { image, aspectRatio, focusPoint, imgProps: { width, height } = {} }: ThumbnailProps,\n element: HTMLImageElement \| undefined,\n isLoaded: boolean,\n): CSSProperties => {\n // Get natural image size from imgProps or img element.\n const imageSize: Size \| undefined = useMemo(() => {\n // Focus point is not applicable => exit early\n if (!image \|\| aspectRatio === AspectRatio.original \|\| (!focusPoint?.x && !focusPoint?.y)) return undefined;\n if (typeof width === 'number' && typeof height === 'number') return { width, height };\n if (element && isLoaded) return { width: element.naturalWidth, height: element.naturalHeight };\n return undefined;\n }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);\n\n // Get container size (dependant on imageSize).\n const [containerSize, setContainerSize] = useState<Size \| undefined>(undefined);\n useEffect(\n function updateContainerSize() {\n const cWidth = element?.offsetWidth;\n const cHeight = element?.offsetHeight;\n if (cWidth && cHeight) {\n // Update only if needed.\n setContainerSize((oldContainerSize) =>\n oldContainerSize?.width === cWidth && oldContainerSize.height === cHeight\n ? oldContainerSize\n : { width: cWidth, height: cHeight },\n );\n } else if (imageSize) {\n // Wait for a render (in case the container size is dependent on the image size).\n requestAnimationFrame(updateContainerSize);\n }\n },\n [element?.offsetHeight, element?.offsetWidth, imageSize],\n );\n\n // Compute style.\n const [style, setStyle] = useState<CSSProperties>({});\n useEffect(() => {\n // Focus point is not applicable => exit early\n if (!image \|\| aspectRatio === AspectRatio.original \|\| (!focusPoint?.x && !focusPoint?.y)) {\n return;\n }\n if (!element \|\| !imageSize) {\n // Focus point can be computed but now right now (image size unknown).\n setStyle({ visibility: 'hidden' });\n return;\n }\n if (!containerSize) {\n // Missing container size abort focus point compute.\n setStyle({});\n return;\n }\n\n const heightScale = imageSize.height / containerSize.height;\n const widthScale = imageSize.width / containerSize.width;\n const scale = Math.min(widthScale, heightScale);\n\n // Focus Y relative to the top (instead of the center)\n const focusPointFromTop = Math.abs((focusPoint?.y \|\| 0) - 1) / 2;\n const y = shiftPosition({\n scale,\n focusPoint: focusPointFromTop,\n imageSize: imageSize.height,\n containerSize: containerSize.height,\n });\n\n // Focus X relative to the left (instead of the center)\n const focusPointFromLeft = Math.abs((focusPoint?.x \|\| 0) + 1) / 2;\n const x = shiftPosition({\n scale,\n focusPoint: focusPointFromLeft,\n imageSize: imageSize.width,\n containerSize: containerSize.width,\n });\n\n const objectPosition = `${x}% ${y}%`;\n // Update only if needed.\n setStyle((oldStyle) => (oldStyle.objectPosition === objectPosition ? oldStyle : { objectPosition }));\n }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);\n\n return style;\n};\n","import React, {\n CSSProperties,\n forwardRef,\n ImgHTMLAttributes,\n KeyboardEventHandler,\n MouseEventHandler,\n ReactElement,\n ReactNode,\n Ref,\n useState,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react';\n\nimport { Comp, Falsy, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';\n\nimport { mdiImageBroken } from '@lumx/icons';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';\nimport { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';\nimport { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';\n\ntype ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;\n\n/*\n Defines the props of the component.\n /\nexport interface ThumbnailProps extends GenericProps, HasTheme {\n /* Alignment of the thumbnail in it's parent (requires flex parent). /\n align?: HorizontalAlignment;\n /* Image alternative text. /\n alt: string;\n /* Image aspect ratio. /\n aspectRatio?: AspectRatio;\n /* Badge. /\n badge?: ReactElement \| Falsy;\n /* Image cross origin resource policy. /\n crossOrigin?: ImgHTMLProps['crossOrigin'];\n /* Fallback icon (SVG path) or react node when image fails to load. /\n fallback?: string \| ReactNode;\n /* Whether the thumbnail should fill it's parent size (requires flex parent) or not. /\n fillHeight?: boolean;\n /* Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. /\n focusPoint?: FocusPoint;\n /* Image URL. /\n image: string;\n /* Props to inject into the native <img> element. /\n imgProps?: ImgHTMLProps;\n /* Reference to the native <img> element. /\n imgRef?: Ref<HTMLImageElement>;\n /* Set to true to force the display of the loading skeleton. /\n isLoading?: boolean;\n /* Size variant of the component. /\n size?: ThumbnailSize;\n /* Image loading mode. /\n loading?: ImgHTMLProps['loading'];\n /* On click callback. /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /* On key press callback. /\n onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n /* Variant of the component. /\n variant?: ThumbnailVariant;\n /* Props to pass to the link wrapping the thumbnail. /\n linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n /* Custom react component for the link (can be used to inject react router Link). /\n linkAs?: 'a' \| any;\n}\n\n/\n Component display name.\n /\nconst COMPONENT_NAME = 'Thumbnail';\n\n/\n Component default class name and class prefix.\n /\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/\n Component default props.\n /\nconst DEFAULT_PROPS: Partial<ThumbnailProps> = {\n fallback: mdiImageBroken,\n loading: 'lazy',\n theme: Theme.light,\n};\n\n/\n Thumbnail component.\n \n @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {\n const {\n align,\n alt,\n aspectRatio = AspectRatio.original,\n badge,\n className,\n crossOrigin,\n fallback,\n fillHeight,\n // `focusPoint` needs to be here to remove it from `forwardedProps`.\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n focusPoint,\n image,\n imgProps,\n imgRef: propImgRef,\n isLoading: isLoadingProp,\n loading,\n size,\n theme,\n variant,\n linkProps,\n linkAs,\n ...forwardedProps\n } = props;\n const [imgElement, setImgElement] = useState<HTMLImageElement>();\n\n // Image loading state.\n const loadingState = useImageLoad(image, imgElement);\n const isLoaded = loadingState === 'isLoaded';\n const isLoading = isLoadingProp \|\| loadingState === 'isLoading';\n const hasError = loadingState === 'hasError';\n\n // Focus point.\n const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);\n\n const hasIconErrorFallback = hasError && typeof fallback === 'string';\n const hasCustomErrorFallback = hasError && !hasIconErrorFallback;\n const imageErrorStyle: CSSProperties = {};\n if (hasIconErrorFallback) {\n // Keep the image layout on icon fallback.\n imageErrorStyle.visibility = 'hidden';\n } else if (hasCustomErrorFallback) {\n // Remove the image on custom fallback.\n imageErrorStyle.display = 'none';\n }\n\n const isLink = Boolean(linkProps?.href \|\| linkAs);\n const isButton = !!forwardedProps.onClick;\n const isClickable = isButton \|\| isLink;\n\n let Wrapper: any = 'div';\n const wrapperProps = { ...forwardedProps };\n if (isLink) {\n Wrapper = linkAs \|\| 'a';\n Object.assign(wrapperProps, linkProps);\n } else if (isButton) {\n Wrapper = 'button';\n wrapperProps.type = forwardedProps.type \|\| 'button';\n wrapperProps['aria-label'] = forwardedProps['aria-label'] \|\| alt;\n }\n\n return (\n <Wrapper\n {...wrapperProps}\n ref={ref}\n className={classNames(\n linkProps?.className,\n className,\n handleBasicClasses({\n align,\n aspectRatio,\n prefix: CLASSNAME,\n size,\n theme,\n variant,\n isClickable,\n hasError,\n hasIconErrorFallback,\n hasCustomErrorFallback,\n isLoading,\n hasBadge: !!badge,\n }),\n fillHeight && `${CLASSNAME}--fill-height`,\n )}\n >\n <div className={`${CLASSNAME}__background`}>\n <img\n {...imgProps}\n style={{\n ...imgProps?.style,\n ...imageErrorStyle,\n ...focusPointStyle,\n }}\n ref={mergeRefs(setImgElement, propImgRef)}\n className={classNames(\n handleBasicClasses({\n prefix: `${CLASSNAME}__image`,\n isLoading,\n hasDefinedSize: Boolean(imgProps?.height && imgProps.width),\n }),\n imgProps?.className,\n )}\n crossOrigin={crossOrigin}\n src={image}\n alt={alt}\n loading={loading}\n />\n {!isLoading && hasError && (\n <div className={`${CLASSNAME}__fallback`}>\n {hasIconErrorFallback ? (\n <Icon icon={fallback as string} size={Size.xxs} theme={theme} />\n ) : (\n fallback\n )}\n </div>\n )}\n </div>\n {badge &&\n React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}\n </Wrapper>\n );\n});\nThumbnail.displayName = COMPONENT_NAME;\nThumbnail.className = CLASSNAME;\nThumbnail.defaultProps = DEFAULT_PROPS;\n"],"names":["getState","img","event","type","complete","naturalWidth","naturalHeight","useImageLoad","imageURL","imgRef","useState","state","setState","useEffect","undefined","update","addEventListener","removeEventListener","src","shiftPosition","scale","focusPoint","imageSize","containerSize","scaledSize","scaledFocusHeight","startFocus","shift","Math","floor","max","min","useFocusPointStyle","element","isLoaded","image","aspectRatio","imgProps","width","height","useMemo","AspectRatio","original","x","y","setContainerSize","updateContainerSize","cWidth","offsetWidth","cHeight","offsetHeight","oldContainerSize","requestAnimationFrame","style","setStyle","visibility","heightScale","widthScale","focusPointFromTop","abs","focusPointFromLeft","objectPosition","oldStyle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","mdiImageBroken","loading","theme","Theme","light","Thumbnail","forwardRef","props","ref","align","alt","badge","className","crossOrigin","fillHeight","propImgRef","isLoadingProp","isLoading","size","variant","linkProps","linkAs","forwardedProps","imgElement","setImgElement","loadingState","hasError","focusPointStyle","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","display","isLink","Boolean","href","isButton","onClick","isClickable","Wrapper","wrapperProps","Object","assign","classNames","handleBasicClasses","prefix","hasBadge","mergeRefs","hasDefinedSize","Size","xxs","React","cloneElement","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/components.js CHANGED Viewed

@@ -103,12 +103,12 @@ var TypographyTitleCustom = {
  * List of typographies that can be customized (via CSS variables).
  */
 var TypographyCustom = _objectSpread2({}, TypographyTitleCustom, {
-  intro: 'intro',
-  'body-large': 'body-large',
-  body: 'body',
-  quote: 'quote',
-  'publish-info': 'publish-info',
-  button: 'button'
+  intro: 'custom-intro',
+  'body-large': 'custom-body-large',
+  body: 'custom-body',
+  quote: 'custom-quote',
+  'publish-info': 'custom-publish-info',
+  button: 'custom-button'
 });
 /**
@@ -151,5 +151,5 @@ var Kind = {
   error: 'error'
 };
-export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyInterface, TypographyTitleCustom };
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom };
 //# sourceMappingURL=components.js.map

package/esm/_internal/components.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"components.js","sources":["../../../src/components/index.ts"],"sourcesContent":["import { ValueOf } from '@lumx/react/utils';\n\n/*\n Alignments.\n /\nexport const Alignment = {\n bottom: 'bottom',\n center: 'center',\n end: 'end',\n left: 'left',\n right: 'right',\n spaceAround: 'space-around',\n spaceBetween: 'space-between',\n start: 'start',\n top: 'top',\n} as const;\nexport type Alignment = ValueOf<typeof Alignment>;\nexport type VerticalAlignment = Extract<Alignment, 'top' \| 'center' \| 'bottom'>;\nexport type HorizontalAlignment = Extract<Alignment, 'right' \| 'center' \| 'left'>;\n\n/\n See SCSS variable $lumx-color-palette\n /\nexport const ColorPalette = {\n primary: 'primary',\n secondary: 'secondary',\n blue: 'blue',\n dark: 'dark',\n green: 'green',\n yellow: 'yellow',\n red: 'red',\n light: 'light',\n grey: 'grey',\n} as const;\nexport type ColorPalette = ValueOf<typeof ColorPalette>;\nexport type Color = ColorPalette \| string;\n\n/\n See SCSS variable $lumx-color-variants\n /\nexport const ColorVariant = {\n D1: 'D1',\n D2: 'D2',\n L1: 'L1',\n L2: 'L2',\n L3: 'L3',\n L4: 'L4',\n L5: 'L5',\n L6: 'L6',\n N: 'N',\n} as const;\nexport type ColorVariant = ValueOf<typeof ColorVariant>;\n\nexport const Theme = {\n light: 'light',\n dark: 'dark',\n} as const;\nexport type Theme = ValueOf<typeof Theme>;\n\nexport const Size = {\n xxs: 'xxs',\n xs: 'xs',\n s: 's',\n m: 'm',\n l: 'l',\n xl: 'xl',\n xxl: 'xxl',\n tiny: 'tiny',\n regular: 'regular',\n medium: 'medium',\n big: 'big',\n huge: 'huge',\n} as const;\nexport type Size = ValueOf<typeof Size>;\nexport type GlobalSize = Extract<Size, 'xxs' \| 'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl'>;\n\nexport const Orientation = {\n horizontal: 'horizontal',\n vertical: 'vertical',\n} as const;\nexport type Orientation = ValueOf<typeof Orientation>;\n\nexport const Emphasis = {\n low: 'low',\n medium: 'medium',\n high: 'high',\n} as const;\nexport type Emphasis = ValueOf<typeof Emphasis>;\n\n/\n List of typographies that can't be customized.\n /\nexport const TypographyInterface = {\n overline: 'overline',\n caption: 'caption',\n body1: 'body1',\n body2: 'body2',\n subtitle1: 'subtitle1',\n subtitle2: 'subtitle2',\n title: 'title',\n headline: 'headline',\n display1: 'display1',\n} as const;\nexport type TypographyInterface = ValueOf<typeof TypographyInterface>;\n\n/\n List of title typographies that can be customized (via CSS variables).\n /\nexport const TypographyTitleCustom = {\n title1: 'custom-title1',\n title2: 'custom-title2',\n title3: 'custom-title3',\n title4: 'custom-title4',\n title5: 'custom-title5',\n title6: 'custom-title6',\n} as const;\nexport type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;\n\n/\n List of typographies that can be customized (via CSS variables).\n /\~~nconst~~ TypographyCustom = {\n ...TypographyTitleCustom,\n intro: 'intro',\n 'body-large': 'body-large',\n body: 'body',\n quote: 'quote',\n 'publish-info': 'publish-info',\n button: 'button',\n} as const;\nexport type TypographyCustom = ValueOf<typeof TypographyCustom>;\n\n/\n List of all typographies.\n /\nexport const Typography = {\n ...TypographyInterface,\n custom: TypographyCustom,\n} as const;\nexport type Typography = TypographyInterface \| TypographyCustom;\n\n/\n All available aspect ratios.\n /\nexport const AspectRatio = {\n /* Intrinsic content ratio. /\n original: 'original',\n /* Ratio 16:9 /\n wide: 'wide',\n /* Ratio 3:2 /\n horizontal: 'horizontal',\n /* Ratio 3:2 /\n vertical: 'vertical',\n /* Ratio 1:1 /\n square: 'square',\n /* Ratio constrained by the parent. /\n free: 'free',\n} as const;\nexport type AspectRatio = ValueOf<typeof AspectRatio>;\n\n/\n Semantic info about the purpose of the component\n */\nexport const Kind = {\n info: 'info',\n success: 'success',\n warning: 'warning',\n error: 'error',\n} as const;\nexport type Kind = ValueOf<typeof Kind>;\n"],"names":["Alignment","bottom","center","end","left","right","spaceAround","spaceBetween","start","top","ColorPalette","primary","secondary","blue","dark","green","yellow","red","light","grey","ColorVariant","D1","D2","L1","L2","L3","L4","L5","L6","N","Theme","Size","xxs","xs","s","m","l","xl","xxl","tiny","regular","medium","big","huge","Orientation","horizontal","vertical","Emphasis","low","high","TypographyInterface","overline","caption","body1","body2","subtitle1","subtitle2","title","headline","display1","TypographyTitleCustom","title1","title2","title3","title4","title5","title6","TypographyCustom","intro","body","quote","button","Typography","custom","AspectRatio","original","wide","square","free","Kind","info","success","warning","error"],"mappings":";;AAEA;;;IAGaA,SAAS,GAAG;AACrBC,EAAAA,MAAM,EAAE,QADa;AAErBC,EAAAA,MAAM,EAAE,QAFa;AAGrBC,EAAAA,GAAG,EAAE,KAHgB;AAIrBC,EAAAA,IAAI,EAAE,MAJe;AAKrBC,EAAAA,KAAK,EAAE,OALc;AAMrBC,EAAAA,WAAW,EAAE,cANQ;AAOrBC,EAAAA,YAAY,EAAE,eAPO;AAQrBC,EAAAA,KAAK,EAAE,OARc;AASrBC,EAAAA,GAAG,EAAE;AATgB;;AAezB;;;IAGaC,YAAY,GAAG;AACxBC,EAAAA,OAAO,EAAE,SADe;AAExBC,EAAAA,SAAS,EAAE,WAFa;AAGxBC,EAAAA,IAAI,EAAE,MAHkB;AAIxBC,EAAAA,IAAI,EAAE,MAJkB;AAKxBC,EAAAA,KAAK,EAAE,OALiB;AAMxBC,EAAAA,MAAM,EAAE,QANgB;AAOxBC,EAAAA,GAAG,EAAE,KAPmB;AAQxBC,EAAAA,KAAK,EAAE,OARiB;AASxBC,EAAAA,IAAI,EAAE;AATkB;;AAc5B;;;IAGaC,YAAY,GAAG;AACxBC,EAAAA,EAAE,EAAE,IADoB;AAExBC,EAAAA,EAAE,EAAE,IAFoB;AAGxBC,EAAAA,EAAE,EAAE,IAHoB;AAIxBC,EAAAA,EAAE,EAAE,IAJoB;AAKxBC,EAAAA,EAAE,EAAE,IALoB;AAMxBC,EAAAA,EAAE,EAAE,IANoB;AAOxBC,EAAAA,EAAE,EAAE,IAPoB;AAQxBC,EAAAA,EAAE,EAAE,IARoB;AASxBC,EAAAA,CAAC,EAAE;AATqB;IAafC,KAAK,GAAG;AACjBZ,EAAAA,KAAK,EAAE,OADU;AAEjBJ,EAAAA,IAAI,EAAE;AAFW;IAMRiB,IAAI,GAAG;AAChBC,EAAAA,GAAG,EAAE,KADW;AAEhBC,EAAAA,EAAE,EAAE,IAFY;AAGhBC,EAAAA,CAAC,EAAE,GAHa;AAIhBC,EAAAA,CAAC,EAAE,GAJa;AAKhBC,EAAAA,CAAC,EAAE,GALa;AAMhBC,EAAAA,EAAE,EAAE,IANY;AAOhBC,EAAAA,GAAG,EAAE,KAPW;AAQhBC,EAAAA,IAAI,EAAE,MARU;AAShBC,EAAAA,OAAO,EAAE,SATO;AAUhBC,EAAAA,MAAM,EAAE,QAVQ;AAWhBC,EAAAA,GAAG,EAAE,KAXW;AAYhBC,EAAAA,IAAI,EAAE;AAZU;IAiBPC,WAAW,GAAG;AACvBC,EAAAA,UAAU,EAAE,YADW;AAEvBC,EAAAA,QAAQ,EAAE;AAFa;IAMdC,QAAQ,GAAG;AACpBC,EAAAA,GAAG,EAAE,KADe;AAEpBP,EAAAA,MAAM,EAAE,QAFY;AAGpBQ,EAAAA,IAAI,EAAE;AAHc;;AAOxB;;;IAGaC,mBAAmB,GAAG;AAC/BC,EAAAA,QAAQ,EAAE,UADqB;AAE/BC,EAAAA,OAAO,EAAE,SAFsB;AAG/BC,EAAAA,KAAK,EAAE,OAHwB;AAI/BC,EAAAA,KAAK,EAAE,OAJwB;AAK/BC,EAAAA,SAAS,EAAE,WALoB;AAM/BC,EAAAA,SAAS,EAAE,WANoB;AAO/BC,EAAAA,KAAK,EAAE,OAPwB;AAQ/BC,EAAAA,QAAQ,EAAE,UARqB;AAS/BC,EAAAA,QAAQ,EAAE;AATqB;;AAanC;;;IAGaC,qBAAqB,GAAG;AACjCC,EAAAA,MAAM,EAAE,eADyB;AAEjCC,EAAAA,MAAM,EAAE,eAFyB;AAGjCC,EAAAA,MAAM,EAAE,eAHyB;AAIjCC,EAAAA,MAAM,EAAE,eAJyB;AAKjCC,EAAAA,MAAM,EAAE,eALyB;AAMjCC,EAAAA,MAAM,EAAE;AANyB;;AAUrC;;;~~AAGA~~,~~IAAMC,~~gBAAgB,~~sBACfP~~,~~qBADe~~;~~AAElBQ~~,EAAAA,KAAK,EAAE,~~OAFW~~;~~AAGlB~~,gBAAc,~~YAHI~~;~~AAIlBC~~,EAAAA,IAAI,EAAE,~~MAJY~~;~~AAKlBC~~,EAAAA,KAAK,EAAE,~~OALW~~;~~AAMlB~~,kBAAgB,~~cANE~~;~~AAOlBC~~,EAAAA,MAAM,EAAE;~~AAPU,EAAtB~~;;~~AAWA~~;;;IAGaC,UAAU,sBAChBtB,mBADgB;AAEnBuB,EAAAA,MAAM,EAAEN;AAFW;;AAMvB;;;IAGaO,WAAW,GAAG;AACvB;AACAC,EAAAA,QAAQ,EAAE,UAFa;;AAGvB;AACAC,EAAAA,IAAI,EAAE,MAJiB;;AAKvB;AACA/B,EAAAA,UAAU,EAAE,YANW;;AAOvB;AACAC,EAAAA,QAAQ,EAAE,UARa;;AASvB;AACA+B,EAAAA,MAAM,EAAE,QAVe;;AAWvB;AACAC,EAAAA,IAAI,EAAE;AAZiB;;AAgB3B;;;IAGaC,IAAI,GAAG;AAChBC,EAAAA,IAAI,EAAE,MADU;AAEhBC,EAAAA,OAAO,EAAE,SAFO;AAGhBC,EAAAA,OAAO,EAAE,SAHO;AAIhBC,EAAAA,KAAK,EAAE;AAJS;;;;"}
1	+ {"version":3,"file":"components.js","sources":["../../../src/components/index.ts"],"sourcesContent":["import { ValueOf } from '@lumx/react/utils';\n\n/*\n Alignments.\n /\nexport const Alignment = {\n bottom: 'bottom',\n center: 'center',\n end: 'end',\n left: 'left',\n right: 'right',\n spaceAround: 'space-around',\n spaceBetween: 'space-between',\n start: 'start',\n top: 'top',\n} as const;\nexport type Alignment = ValueOf<typeof Alignment>;\nexport type VerticalAlignment = Extract<Alignment, 'top' \| 'center' \| 'bottom'>;\nexport type HorizontalAlignment = Extract<Alignment, 'right' \| 'center' \| 'left'>;\n\n/\n See SCSS variable $lumx-color-palette\n /\nexport const ColorPalette = {\n primary: 'primary',\n secondary: 'secondary',\n blue: 'blue',\n dark: 'dark',\n green: 'green',\n yellow: 'yellow',\n red: 'red',\n light: 'light',\n grey: 'grey',\n} as const;\nexport type ColorPalette = ValueOf<typeof ColorPalette>;\nexport type Color = ColorPalette \| string;\n\n/\n See SCSS variable $lumx-color-variants\n /\nexport const ColorVariant = {\n D1: 'D1',\n D2: 'D2',\n L1: 'L1',\n L2: 'L2',\n L3: 'L3',\n L4: 'L4',\n L5: 'L5',\n L6: 'L6',\n N: 'N',\n} as const;\nexport type ColorVariant = ValueOf<typeof ColorVariant>;\n\nexport const Theme = {\n light: 'light',\n dark: 'dark',\n} as const;\nexport type Theme = ValueOf<typeof Theme>;\n\nexport const Size = {\n xxs: 'xxs',\n xs: 'xs',\n s: 's',\n m: 'm',\n l: 'l',\n xl: 'xl',\n xxl: 'xxl',\n tiny: 'tiny',\n regular: 'regular',\n medium: 'medium',\n big: 'big',\n huge: 'huge',\n} as const;\nexport type Size = ValueOf<typeof Size>;\nexport type GlobalSize = Extract<Size, 'xxs' \| 'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl'>;\n\nexport const Orientation = {\n horizontal: 'horizontal',\n vertical: 'vertical',\n} as const;\nexport type Orientation = ValueOf<typeof Orientation>;\n\nexport const Emphasis = {\n low: 'low',\n medium: 'medium',\n high: 'high',\n} as const;\nexport type Emphasis = ValueOf<typeof Emphasis>;\n\n/\n List of typographies that can't be customized.\n /\nexport const TypographyInterface = {\n overline: 'overline',\n caption: 'caption',\n body1: 'body1',\n body2: 'body2',\n subtitle1: 'subtitle1',\n subtitle2: 'subtitle2',\n title: 'title',\n headline: 'headline',\n display1: 'display1',\n} as const;\nexport type TypographyInterface = ValueOf<typeof TypographyInterface>;\n\n/\n List of title typographies that can be customized (via CSS variables).\n /\nexport const TypographyTitleCustom = {\n title1: 'custom-title1',\n title2: 'custom-title2',\n title3: 'custom-title3',\n title4: 'custom-title4',\n title5: 'custom-title5',\n title6: 'custom-title6',\n} as const;\nexport type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;\n\n/\n List of typographies that can be customized (via CSS variables).\n /\nexport const TypographyCustom = {\n ...TypographyTitleCustom,\n intro: 'custom-intro',\n 'body-large': 'custom-body-large',\n body: 'custom-body',\n quote: 'custom-quote',\n 'publish-info': 'custom-publish-info',\n button: 'custom-button',\n} as const;\nexport type TypographyCustom = ValueOf<typeof TypographyCustom>;\n\n/\n List of all typographies.\n /\nexport const Typography = {\n ...TypographyInterface,\n custom: TypographyCustom,\n} as const;\nexport type Typography = TypographyInterface \| TypographyCustom;\n\n/\n All available aspect ratios.\n /\nexport const AspectRatio = {\n /* Intrinsic content ratio. /\n original: 'original',\n /* Ratio 16:9 /\n wide: 'wide',\n /* Ratio 3:2 /\n horizontal: 'horizontal',\n /* Ratio 3:2 /\n vertical: 'vertical',\n /* Ratio 1:1 /\n square: 'square',\n /* Ratio constrained by the parent. /\n free: 'free',\n} as const;\nexport type AspectRatio = ValueOf<typeof AspectRatio>;\n\n/\n Semantic info about the purpose of the component\n */\nexport const Kind = {\n info: 'info',\n success: 'success',\n warning: 'warning',\n error: 'error',\n} as const;\nexport type Kind = ValueOf<typeof Kind>;\n"],"names":["Alignment","bottom","center","end","left","right","spaceAround","spaceBetween","start","top","ColorPalette","primary","secondary","blue","dark","green","yellow","red","light","grey","ColorVariant","D1","D2","L1","L2","L3","L4","L5","L6","N","Theme","Size","xxs","xs","s","m","l","xl","xxl","tiny","regular","medium","big","huge","Orientation","horizontal","vertical","Emphasis","low","high","TypographyInterface","overline","caption","body1","body2","subtitle1","subtitle2","title","headline","display1","TypographyTitleCustom","title1","title2","title3","title4","title5","title6","TypographyCustom","intro","body","quote","button","Typography","custom","AspectRatio","original","wide","square","free","Kind","info","success","warning","error"],"mappings":"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"}

package/esm/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import './_internal/_rollupPluginBabelHelpers.js';
-export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyInterface, TypographyTitleCustom } from './_internal/components.js';
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom } from './_internal/components.js';
 import 'react';
 import './_internal/getRootClassName.js';
 export { I as Icon } from './_internal/Icon2.js';

package/package.json CHANGED Viewed

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.2.22",
-        "@lumx/icons": "^2.2.22",
+        "@lumx/core": "^2.2.23",
+        "@lumx/icons": "^2.2.23",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.2.22",
-    "gitHead": "a673e0d082a0782a2d4e14d752912d6203075306"
+    "version": "2.2.23",
+    "gitHead": "51fd4513c5b083425f263464cbb1e739ab61ac18"
 }

package/src/components/flex-box/FlexBox.stories.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ const flexViewKnobConfigs: Array<
     ['fillSpace', boolean],
     ['noShrink', boolean],
     ['wrap', boolean],
-    ['gap', select, [DEFAULT_PROPS.gap, Size.regular, Size.medium, Size.big, Size.huge]],
+    ['gap', select, [DEFAULT_PROPS.gap, Size.tiny, Size.regular, Size.medium, Size.big, Size.huge]],
     ['hAlign', select, [DEFAULT_PROPS.hAlign, Alignment.center, Alignment.top, Alignment.bottom]],
     ['vAlign', select, [DEFAULT_PROPS.vAlign, Alignment.center, Alignment.right, Alignment.left]],
     ['orientation', select, [undefined, Orientation.horizontal, Orientation.vertical]],

package/src/components/flex-box/FlexBox.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ import React, { forwardRef, ReactNode } from 'react';
 import { Size } from '..';
 export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
-export type GapSize = Extract<Size, 'regular' | 'medium' | 'big' | 'huge'>;
+export type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
 /**
  * Defines the props of the component.