@lumx/react 2.2.3 → 2.2.6
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.
- package/esm/_internal/AlertDialog.js +1 -2
- package/esm/_internal/AlertDialog.js.map +1 -1
- package/esm/_internal/AutocompleteMultiple.js +1 -2
- package/esm/_internal/AutocompleteMultiple.js.map +1 -1
- package/esm/_internal/Button2.js +1 -1
- package/esm/_internal/Checkbox2.js +1 -2
- package/esm/_internal/Checkbox2.js.map +1 -1
- package/esm/_internal/DatePickerField.js +1 -1
- package/esm/_internal/DragHandle.js +1 -2
- package/esm/_internal/DragHandle.js.map +1 -1
- package/esm/_internal/ExpansionPanel.js +1 -1
- package/esm/_internal/Icon2.js +23 -3
- package/esm/_internal/Icon2.js.map +1 -1
- package/esm/_internal/IconButton.js +1 -1
- package/esm/_internal/Lightbox2.js +1 -1
- package/esm/_internal/Link2.js +1 -1
- package/esm/_internal/LinkPreview.js +1 -1
- package/esm/_internal/LinkPreview.js.map +1 -1
- package/esm/_internal/Message2.js +3 -3
- package/esm/_internal/Message2.js.map +1 -1
- package/esm/_internal/Notification2.js +1 -2
- package/esm/_internal/Notification2.js.map +1 -1
- package/esm/_internal/ProgressTrackerStepPanel.js +1 -2
- package/esm/_internal/ProgressTrackerStepPanel.js.map +1 -1
- package/esm/_internal/SelectMultiple.js +1 -2
- package/esm/_internal/SelectMultiple.js.map +1 -1
- package/esm/_internal/SideNavigationItem.js +1 -2
- package/esm/_internal/SideNavigationItem.js.map +1 -1
- package/esm/_internal/SlideshowControls.js +1 -1
- package/esm/_internal/TabPanel.js +1 -1
- package/esm/_internal/TableRow.js +1 -2
- package/esm/_internal/TableRow.js.map +1 -1
- package/esm/_internal/TextField.js +1 -2
- package/esm/_internal/TextField.js.map +1 -1
- package/esm/_internal/Thumbnail2.js +6 -3
- package/esm/_internal/Thumbnail2.js.map +1 -1
- package/esm/_internal/alert-dialog.js +1 -2
- package/esm/_internal/alert-dialog.js.map +1 -1
- package/esm/_internal/autocomplete.js +1 -2
- package/esm/_internal/autocomplete.js.map +1 -1
- package/esm/_internal/avatar.js +1 -2
- package/esm/_internal/avatar.js.map +1 -1
- package/esm/_internal/button.js +1 -1
- package/esm/_internal/checkbox.js +1 -2
- package/esm/_internal/checkbox.js.map +1 -1
- package/esm/_internal/comment-block.js +1 -2
- package/esm/_internal/comment-block.js.map +1 -1
- package/esm/_internal/date-picker.js +1 -2
- package/esm/_internal/date-picker.js.map +1 -1
- package/esm/_internal/drag-handle.js +1 -2
- package/esm/_internal/drag-handle.js.map +1 -1
- package/esm/_internal/expansion-panel.js +1 -2
- package/esm/_internal/expansion-panel.js.map +1 -1
- package/esm/_internal/flag.js +1 -1
- package/esm/_internal/icon.js +1 -1
- package/esm/_internal/image-block.js +1 -2
- package/esm/_internal/image-block.js.map +1 -1
- package/esm/_internal/lightbox.js +1 -2
- package/esm/_internal/lightbox.js.map +1 -1
- package/esm/_internal/link-preview.js +1 -2
- package/esm/_internal/link-preview.js.map +1 -1
- package/esm/_internal/link.js +1 -1
- package/esm/_internal/message.js +1 -2
- package/esm/_internal/message.js.map +1 -1
- package/esm/_internal/mosaic.js +1 -2
- package/esm/_internal/mosaic.js.map +1 -1
- package/esm/_internal/notification.js +1 -2
- package/esm/_internal/notification.js.map +1 -1
- package/esm/_internal/post-block.js +1 -2
- package/esm/_internal/post-block.js.map +1 -1
- package/esm/_internal/progress-tracker.js +1 -2
- package/esm/_internal/progress-tracker.js.map +1 -1
- package/esm/_internal/select.js +1 -2
- package/esm/_internal/select.js.map +1 -1
- package/esm/_internal/side-navigation.js +1 -2
- package/esm/_internal/side-navigation.js.map +1 -1
- package/esm/_internal/slideshow.js +1 -2
- package/esm/_internal/slideshow.js.map +1 -1
- package/esm/_internal/table.js +1 -2
- package/esm/_internal/table.js.map +1 -1
- package/esm/_internal/tabs.js +1 -1
- package/esm/_internal/text-field.js +1 -2
- package/esm/_internal/text-field.js.map +1 -1
- package/esm/_internal/thumbnail.js +1 -2
- package/esm/_internal/thumbnail.js.map +1 -1
- package/esm/_internal/uploader.js +1 -1
- package/esm/_internal/user-block.js +1 -2
- package/esm/_internal/user-block.js.map +1 -1
- package/esm/index.js +1 -2
- package/esm/index.js.map +1 -1
- package/package.json +4 -4
- package/src/components/icon/Icon.tsx +5 -0
- package/src/components/link-preview/LinkPreview.tsx +1 -1
- package/src/components/link-preview/__snapshots__/LinkPreview.test.tsx.snap +2 -2
- package/src/components/message/Message.tsx +3 -1
- package/src/components/thumbnail/Thumbnail.tsx +7 -1
- package/esm/_internal/mdi.js +0 -22
- package/esm/_internal/mdi.js.map +0 -1
|
@@ -2,7 +2,7 @@ import { b as _objectWithoutProperties, d as _slicedToArray, c as _extends, a as
|
|
|
2
2
|
import { Theme, Emphasis } from './components.js';
|
|
3
3
|
import React, { useRef, useEffect, forwardRef, useState, useCallback, useMemo } from 'react';
|
|
4
4
|
import { g as getRootClassName, c as classnames, h as handleBasicClasses, e as detectHorizontalSwipe } from './getRootClassName.js';
|
|
5
|
-
import { g as mdiChevronLeft, f as mdiChevronRight } from './
|
|
5
|
+
import { g as mdiChevronLeft, f as mdiChevronRight } from './Icon2.js';
|
|
6
6
|
import { W as WINDOW } from './constants.js';
|
|
7
7
|
import { m as mergeRefs } from './mergeRefs.js';
|
|
8
8
|
import { I as IconButton } from './IconButton.js';
|
|
@@ -2,8 +2,8 @@ import { b as _objectWithoutProperties, d as _slicedToArray, e as _toConsumableA
|
|
|
2
2
|
import { Alignment, Theme, Size } from './components.js';
|
|
3
3
|
import React, { useReducer, useEffect, forwardRef, useCallback } from 'react';
|
|
4
4
|
import { c as classnames, h as handleBasicClasses, C as CSS_PREFIX } from './getRootClassName.js';
|
|
5
|
-
import { m as mergeRefs } from './mergeRefs.js';
|
|
6
5
|
import { I as Icon } from './Icon2.js';
|
|
6
|
+
import { m as mergeRefs } from './mergeRefs.js';
|
|
7
7
|
import { r as reducer, I as INIT_STATE, T as TabProviderContext, u as useRovingTabIndex, b as useTabProviderContext } from './useRovingTabIndex.js';
|
|
8
8
|
|
|
9
9
|
var DEFAULT_PROPS = {
|
|
@@ -2,9 +2,8 @@ import { b as _objectWithoutProperties, c as _extends, a as _defineProperty } fr
|
|
|
2
2
|
import { Theme, Size } from './components.js';
|
|
3
3
|
import React, { forwardRef, useCallback } from 'react';
|
|
4
4
|
import { g as getRootClassName, c as classnames, h as handleBasicClasses, o as onEnterPressed } from './getRootClassName.js';
|
|
5
|
-
import { p as mdiArrowUp, q as mdiArrowDown } from './
|
|
5
|
+
import { I as Icon, p as mdiArrowUp, q as mdiArrowDown } from './Icon2.js';
|
|
6
6
|
import isFunction from 'lodash/isFunction';
|
|
7
|
-
import { I as Icon } from './Icon2.js';
|
|
8
7
|
|
|
9
8
|
/**
|
|
10
9
|
* Defines the props of the component.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.js","sources":["../../../src/components/table/Table.tsx","../../../src/components/table/TableBody.tsx","../../../src/components/table/TableCell.tsx","../../../src/components/table/TableHeader.tsx","../../../src/components/table/TableRow.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface TableProps extends GenericProps {\n /** Whether the table has checkbox or thumbnail on first cell or not. */\n hasBefore?: boolean;\n /** Whether the table has dividers or not. */\n hasDividers?: boolean;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Table';\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<TableProps> = {\n theme: Theme.light,\n};\n\n/**\n * Table component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Table: Comp<TableProps, HTMLTableElement> = forwardRef((props, ref) => {\n const { children, className, hasBefore, hasDividers, theme, ...forwardedProps } = props;\n\n return (\n <table\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, hasBefore, hasDividers, theme }))}\n >\n {children}\n </table>\n );\n});\nTable.displayName = COMPONENT_NAME;\nTable.className = CLASSNAME;\nTable.defaultProps = DEFAULT_PROPS;\n","import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport type TableBodyProps = GenericProps;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TableBody';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME, true);\n\n/**\n * TableBody component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TableBody: Comp<TableBodyProps, HTMLTableSectionElement> = forwardRef((props, ref) => {\n const { children, className, ...forwardedProps } = props;\n\n return (\n <tbody\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}\n >\n {children}\n </tbody>\n );\n});\nTableBody.displayName = COMPONENT_NAME;\nTableBody.className = CLASSNAME;\n","import React, { forwardRef, useCallback } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Icon, Size } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, onEnterPressed, ValueOf } from '@lumx/react/utils';\n\nimport { mdiArrowDown, mdiArrowUp } from '@lumx/icons';\n\nimport isFunction from 'lodash/isFunction';\n\n/**\n * Table head cell sort order.\n */\nexport const ThOrder = { asc: 'asc', desc: 'desc' } as const;\nexport type ThOrder = ValueOf<typeof ThOrder>;\n\n/**\n * Table cell variants.\n */\nexport const TableCellVariant = { body: 'body', head: 'head' } as const;\nexport type TableCellVariant = ValueOf<typeof TableCellVariant>;\n\n/**\n * Defines the props of the component.\n */\nexport interface TableCellProps extends GenericProps {\n /** Icon (SVG path).(thead only). */\n icon?: string;\n /** Whether the column is sortable or not (thead only). */\n isSortable?: boolean;\n /** Sort order displayed as icon (sortable thead only). */\n sortOrder?: ThOrder;\n /** Variant. */\n variant?: TableCellVariant;\n /** On header cell click callback. */\n onHeaderClick?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TableCell';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME, true);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TableCellProps> = {\n variant: TableCellVariant.body,\n};\n\n/**\n * TableCell component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TableCell: Comp<TableCellProps, HTMLTableCellElement> = forwardRef((props, ref) => {\n const { children, className, icon, isSortable, onHeaderClick, sortOrder, variant, ...forwardedProps } = props;\n\n /**\n * Handle click on the ordered thead.\n */\n const handleOnHeaderClick = useCallback(() => {\n if (isFunction(onHeaderClick)) {\n onHeaderClick();\n }\n }, [onHeaderClick]);\n\n return (\n <>\n {variant === TableCellVariant.head && (\n <th\n ref={ref}\n {...forwardedProps}\n className={classNames(\n handleBasicClasses({ prefix: CLASSNAME, isSortable }),\n className,\n `${CLASSNAME}--head`,\n {\n [`${CLASSNAME}--is-sorted`]: isSortable && sortOrder,\n },\n )}\n tabIndex={isSortable && isFunction(onHeaderClick) ? 0 : -1}\n onClick={handleOnHeaderClick}\n onKeyDown={onEnterPressed(handleOnHeaderClick)}\n >\n <div className={`${CLASSNAME}-wrapper`}>\n {icon && !isSortable && <Icon className={`${CLASSNAME}-icon`} icon={icon} size={Size.xxs} />}\n\n {isSortable && sortOrder === ThOrder.asc && (\n <Icon className={`${CLASSNAME}-icon`} icon={mdiArrowUp} size={Size.xxs} />\n )}\n\n {isSortable && sortOrder === ThOrder.desc && (\n <Icon className={`${CLASSNAME}-icon`} icon={mdiArrowDown} size={Size.xxs} />\n )}\n\n <div className={`${CLASSNAME}-content`}>{children}</div>\n </div>\n </th>\n )}\n\n {variant === TableCellVariant.body && (\n <td\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }), `${CLASSNAME}--body`)}\n >\n <div className={`${CLASSNAME}-content`}>{children}</div>\n </td>\n )}\n </>\n );\n});\nTableCell.displayName = COMPONENT_NAME;\nTableCell.className = CLASSNAME;\nTableCell.defaultProps = DEFAULT_PROPS;\n","import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport type TableHeaderProps = GenericProps;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TableHeader';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME, true);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TableHeaderProps> = {};\n\n/**\n * TableHeader component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TableHeader: Comp<TableHeaderProps, HTMLTableSectionElement> = forwardRef((props, ref) => {\n const { children, className, ...forwardedProps } = props;\n\n return (\n <thead\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}\n >\n {children}\n </thead>\n );\n});\nTableHeader.displayName = COMPONENT_NAME;\nTableHeader.className = CLASSNAME;\nTableHeader.defaultProps = DEFAULT_PROPS;\n","import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface TableRowProps extends GenericProps {\n /** Whether the component is clickable or not. */\n isClickable?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Whether the component is selected or not. */\n isSelected?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TableRow';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME, true);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TableRowProps> = {};\n\n/**\n * TableRow component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TableRow: Comp<TableRowProps, HTMLTableRowElement> = forwardRef((props, ref) => {\n const { children, className, disabled, isClickable, isDisabled = disabled, isSelected, ...forwardedProps } = props;\n\n return (\n <tr\n ref={ref}\n tabIndex={isClickable && !isDisabled ? 0 : -1}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n isClickable: isClickable && !isDisabled,\n isDisabled,\n isSelected: isSelected && !isDisabled,\n prefix: CLASSNAME,\n }),\n )}\n aria-disabled={isDisabled}\n >\n {children}\n </tr>\n );\n});\n\nTableRow.displayName = COMPONENT_NAME;\nTableRow.className = CLASSNAME;\nTableRow.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Table","forwardRef","props","ref","children","className","hasBefore","hasDividers","forwardedProps","classNames","handleBasicClasses","prefix","displayName","defaultProps","TableBody","ThOrder","asc","desc","TableCellVariant","body","head","variant","TableCell","icon","isSortable","onHeaderClick","sortOrder","handleOnHeaderClick","useCallback","isFunction","onEnterPressed","Size","xxs","mdiArrowUp","mdiArrowDown","TableHeader","TableRow","disabled","isClickable","isDisabled","isSelected"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TableRow.js","sources":["../../../src/components/table/Table.tsx","../../../src/components/table/TableBody.tsx","../../../src/components/table/TableCell.tsx","../../../src/components/table/TableHeader.tsx","../../../src/components/table/TableRow.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface TableProps extends GenericProps {\n /** Whether the table has checkbox or thumbnail on first cell or not. */\n hasBefore?: boolean;\n /** Whether the table has dividers or not. */\n hasDividers?: boolean;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Table';\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<TableProps> = {\n theme: Theme.light,\n};\n\n/**\n * Table component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Table: Comp<TableProps, HTMLTableElement> = forwardRef((props, ref) => {\n const { children, className, hasBefore, hasDividers, theme, ...forwardedProps } = props;\n\n return (\n <table\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, hasBefore, hasDividers, theme }))}\n >\n {children}\n </table>\n );\n});\nTable.displayName = COMPONENT_NAME;\nTable.className = CLASSNAME;\nTable.defaultProps = DEFAULT_PROPS;\n","import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport type TableBodyProps = GenericProps;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TableBody';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME, true);\n\n/**\n * TableBody component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TableBody: Comp<TableBodyProps, HTMLTableSectionElement> = forwardRef((props, ref) => {\n const { children, className, ...forwardedProps } = props;\n\n return (\n <tbody\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}\n >\n {children}\n </tbody>\n );\n});\nTableBody.displayName = COMPONENT_NAME;\nTableBody.className = CLASSNAME;\n","import React, { forwardRef, useCallback } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Icon, Size } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, onEnterPressed, ValueOf } from '@lumx/react/utils';\n\nimport { mdiArrowDown, mdiArrowUp } from '@lumx/icons';\n\nimport isFunction from 'lodash/isFunction';\n\n/**\n * Table head cell sort order.\n */\nexport const ThOrder = { asc: 'asc', desc: 'desc' } as const;\nexport type ThOrder = ValueOf<typeof ThOrder>;\n\n/**\n * Table cell variants.\n */\nexport const TableCellVariant = { body: 'body', head: 'head' } as const;\nexport type TableCellVariant = ValueOf<typeof TableCellVariant>;\n\n/**\n * Defines the props of the component.\n */\nexport interface TableCellProps extends GenericProps {\n /** Icon (SVG path).(thead only). */\n icon?: string;\n /** Whether the column is sortable or not (thead only). */\n isSortable?: boolean;\n /** Sort order displayed as icon (sortable thead only). */\n sortOrder?: ThOrder;\n /** Variant. */\n variant?: TableCellVariant;\n /** On header cell click callback. */\n onHeaderClick?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TableCell';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME, true);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TableCellProps> = {\n variant: TableCellVariant.body,\n};\n\n/**\n * TableCell component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TableCell: Comp<TableCellProps, HTMLTableCellElement> = forwardRef((props, ref) => {\n const { children, className, icon, isSortable, onHeaderClick, sortOrder, variant, ...forwardedProps } = props;\n\n /**\n * Handle click on the ordered thead.\n */\n const handleOnHeaderClick = useCallback(() => {\n if (isFunction(onHeaderClick)) {\n onHeaderClick();\n }\n }, [onHeaderClick]);\n\n return (\n <>\n {variant === TableCellVariant.head && (\n <th\n ref={ref}\n {...forwardedProps}\n className={classNames(\n handleBasicClasses({ prefix: CLASSNAME, isSortable }),\n className,\n `${CLASSNAME}--head`,\n {\n [`${CLASSNAME}--is-sorted`]: isSortable && sortOrder,\n },\n )}\n tabIndex={isSortable && isFunction(onHeaderClick) ? 0 : -1}\n onClick={handleOnHeaderClick}\n onKeyDown={onEnterPressed(handleOnHeaderClick)}\n >\n <div className={`${CLASSNAME}-wrapper`}>\n {icon && !isSortable && <Icon className={`${CLASSNAME}-icon`} icon={icon} size={Size.xxs} />}\n\n {isSortable && sortOrder === ThOrder.asc && (\n <Icon className={`${CLASSNAME}-icon`} icon={mdiArrowUp} size={Size.xxs} />\n )}\n\n {isSortable && sortOrder === ThOrder.desc && (\n <Icon className={`${CLASSNAME}-icon`} icon={mdiArrowDown} size={Size.xxs} />\n )}\n\n <div className={`${CLASSNAME}-content`}>{children}</div>\n </div>\n </th>\n )}\n\n {variant === TableCellVariant.body && (\n <td\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }), `${CLASSNAME}--body`)}\n >\n <div className={`${CLASSNAME}-content`}>{children}</div>\n </td>\n )}\n </>\n );\n});\nTableCell.displayName = COMPONENT_NAME;\nTableCell.className = CLASSNAME;\nTableCell.defaultProps = DEFAULT_PROPS;\n","import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport type TableHeaderProps = GenericProps;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TableHeader';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME, true);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TableHeaderProps> = {};\n\n/**\n * TableHeader component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TableHeader: Comp<TableHeaderProps, HTMLTableSectionElement> = forwardRef((props, ref) => {\n const { children, className, ...forwardedProps } = props;\n\n return (\n <thead\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}\n >\n {children}\n </thead>\n );\n});\nTableHeader.displayName = COMPONENT_NAME;\nTableHeader.className = CLASSNAME;\nTableHeader.defaultProps = DEFAULT_PROPS;\n","import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface TableRowProps extends GenericProps {\n /** Whether the component is clickable or not. */\n isClickable?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Whether the component is selected or not. */\n isSelected?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TableRow';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME, true);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TableRowProps> = {};\n\n/**\n * TableRow component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TableRow: Comp<TableRowProps, HTMLTableRowElement> = forwardRef((props, ref) => {\n const { children, className, disabled, isClickable, isDisabled = disabled, isSelected, ...forwardedProps } = props;\n\n return (\n <tr\n ref={ref}\n tabIndex={isClickable && !isDisabled ? 0 : -1}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n isClickable: isClickable && !isDisabled,\n isDisabled,\n isSelected: isSelected && !isDisabled,\n prefix: CLASSNAME,\n }),\n )}\n aria-disabled={isDisabled}\n >\n {children}\n </tr>\n );\n});\n\nTableRow.displayName = COMPONENT_NAME;\nTableRow.className = CLASSNAME;\nTableRow.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Table","forwardRef","props","ref","children","className","hasBefore","hasDividers","forwardedProps","classNames","handleBasicClasses","prefix","displayName","defaultProps","TableBody","ThOrder","asc","desc","TableCellVariant","body","head","variant","TableCell","icon","isSortable","onHeaderClick","sortOrder","handleOnHeaderClick","useCallback","isFunction","onEnterPressed","Size","xxs","mdiArrowUp","mdiArrowDown","TableHeader","TableRow","disabled","isClickable","isDisabled","isSelected"],"mappings":"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"}
|
|
@@ -2,12 +2,11 @@ import { b as _objectWithoutProperties, d as _slicedToArray, _ as _objectSpread2
|
|
|
2
2
|
import { Size, Theme, Emphasis, Kind } from './components.js';
|
|
3
3
|
import React, { forwardRef, useMemo, useState, useRef, useEffect } from 'react';
|
|
4
4
|
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
5
|
-
import { c as mdiAlertCircle, b as mdiCheckCircle, n as mdiCloseCircle } from './
|
|
5
|
+
import { I as Icon, c as mdiAlertCircle, b as mdiCheckCircle, n as mdiCloseCircle } from './Icon2.js';
|
|
6
6
|
import { u as uid } from '../index2.js';
|
|
7
7
|
import get from 'lodash/get';
|
|
8
8
|
import { m as mergeRefs } from './mergeRefs.js';
|
|
9
9
|
import { I as IconButton } from './IconButton.js';
|
|
10
|
-
import { I as Icon } from './Icon2.js';
|
|
11
10
|
import { I as InputHelper } from './InputHelper.js';
|
|
12
11
|
import { I as InputLabel } from './InputLabel.js';
|
|
13
12
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","sources":["../../../src/components/text-field/TextField.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, RefObject, SyntheticEvent, useEffect, useMemo, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\nimport get from 'lodash/get';\nimport { uid } from 'uid';\n\nimport { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from '@lumx/icons';\nimport { Emphasis, Icon, IconButton, IconButtonProps, InputHelper, InputLabel, Kind, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\n/**\n * Defines the props of the component.\n */\nexport interface TextFieldProps extends GenericProps {\n /** Chip Group to be rendered before the main text input. */\n chips?: HTMLElement | ReactNode;\n /** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */\n clearButtonProps?: Pick<IconButtonProps, 'label'> &\n Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n /** Error message. */\n error?: string | ReactNode;\n /** Whether we force the focus style or not. */\n forceFocusStyle?: boolean;\n /** Whether the text field is displayed with error style or not. */\n hasError?: boolean;\n /** Additional element to put at the end of the text field. */\n afterElement?: ReactNode;\n /** Helper text. */\n helper?: string | ReactNode;\n /** Icon (SVG path). */\n icon?: string;\n /** Native input id property (generated if not provided to link the label element). */\n id?: string;\n /** Reference to the <input> or <textarea> element. */\n inputRef?: RefObject<HTMLInputElement> | RefObject<HTMLTextAreaElement>;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Whether the component is required or not. */\n isRequired?: boolean;\n /** Whether the text field is displayed with valid style or not. */\n isValid?: boolean;\n /** Label text. */\n label?: string;\n /** Max string length the input accepts (constrains the input and displays a character counter). */\n maxLength?: number;\n /** Minimum number of rows displayed in multiline mode (requires `multiline` to be enabled). */\n minimumRows?: number;\n /** Whether the text field is a textarea or an input. */\n multiline?: boolean;\n /** Native input name property. */\n name?: string;\n /** Placeholder text. */\n placeholder?: string;\n /** Reference to the wrapper. */\n textFieldRef?: RefObject<HTMLDivElement>;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Value. */\n value?: string;\n /** On blur callback. */\n onBlur?(event: React.FocusEvent): void;\n /** On change callback. */\n onChange(value: string, name?: string, event?: SyntheticEvent): void;\n /** On focus callback. */\n onFocus?(event: React.FocusEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TextField';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Default minimum number of rows in the multiline mode.\n */\nconst DEFAULT_MIN_ROWS = 2;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TextFieldProps> = {\n theme: Theme.light,\n type: 'text',\n};\n\n/**\n * Hook that allows to calculate the number of rows needed for a text area.\n * @param minimumRows Minimum number of rows that we want to display.\n * @return rows to be used and a callback to recalculate\n */\nconst useComputeNumberOfRows = (\n minimumRows: number,\n): {\n /** number of rows to be used on the text area */\n rows: number;\n /**\n * Callback in order to recalculate the number of rows due to a change on the text area\n */\n recomputeNumberOfRows(target: Element): void;\n} => {\n const [rows, setRows] = useState(minimumRows);\n\n const recompute = (target: Element) => {\n /**\n * HEAD's UP! This part is a little bit tricky. The idea here is to only\n * display the necessary rows on the textarea. In order to dynamically adjust\n * the height on that field, we need to:\n * 1. Set the current amount of rows to the minimum. That will make the scroll appear.\n * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content\n * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height\n * by the line height.\n * 4. With that number, we can readjust the number of rows on the text area. We need to do that here, if we leave that to\n * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)\n * when we will not see the update and the rows will be resized to the minimum.\n * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows\n * on the state in order to allow React to re-render. Therefore, we save them using `useState`\n */\n // eslint-disable-next-line no-param-reassign\n (target as HTMLTextAreaElement).rows = minimumRows;\n let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);\n currentRows = currentRows >= minimumRows ? currentRows : minimumRows;\n // eslint-disable-next-line no-param-reassign\n (target as HTMLTextAreaElement).rows = currentRows;\n\n setRows(currentRows);\n };\n\n return {\n recomputeNumberOfRows: recompute,\n rows,\n };\n};\n\ninterface InputNativeProps {\n id?: string;\n inputRef?: RefObject<HTMLInputElement> | RefObject<HTMLTextAreaElement>;\n isDisabled?: boolean;\n isRequired?: boolean;\n multiline?: boolean;\n maxLength?: number;\n placeholder?: string;\n rows: number;\n type: string;\n name?: string;\n value?: string;\n setFocus(focus: boolean): void;\n recomputeNumberOfRows(target: Element): void;\n onChange(value: string, name?: string, event?: SyntheticEvent): void;\n onFocus?(value: React.FocusEvent): void;\n onBlur?(value: React.FocusEvent): void;\n}\n\nconst renderInputNative: React.FC<InputNativeProps> = (props) => {\n const {\n id,\n isDisabled,\n isRequired,\n placeholder,\n multiline,\n value,\n setFocus,\n onChange,\n onFocus,\n onBlur,\n inputRef,\n rows,\n recomputeNumberOfRows,\n type,\n name,\n ...forwardedProps\n } = props;\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const ref = useRef<HTMLElement>(null);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n // Recompute the number of rows for the first rendering\n if (multiline && ref && ref.current) {\n recomputeNumberOfRows(ref.current);\n }\n }, [ref, multiline, recomputeNumberOfRows, value]);\n\n const onTextFieldFocus = (event: React.FocusEvent) => {\n onFocus?.(event);\n setFocus(true);\n };\n\n const onTextFieldBlur = (event: React.FocusEvent) => {\n onBlur?.(event);\n setFocus(false);\n };\n\n const handleChange = (event: React.ChangeEvent) => {\n onChange(get(event, 'target.value'), name, event);\n };\n\n const Component = multiline ? 'textarea' : 'input';\n const inputProps: any = {\n ...forwardedProps,\n id,\n className: multiline\n ? `${CLASSNAME}__input-native ${CLASSNAME}__input-native--textarea`\n : `${CLASSNAME}__input-native ${CLASSNAME}__input-native--text`,\n placeholder,\n value,\n name,\n disabled: isDisabled,\n required: isRequired,\n onFocus: onTextFieldFocus,\n onBlur: onTextFieldBlur,\n onChange: handleChange,\n ref: mergeRefs(inputRef as any, ref) as any,\n };\n if (multiline) {\n inputProps.rows = rows;\n } else {\n inputProps.type = type;\n }\n return <Component {...inputProps} />;\n};\n\n/**\n * TextField component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n chips,\n className,\n clearButtonProps,\n disabled,\n error,\n forceFocusStyle,\n hasError,\n helper,\n icon,\n id,\n inputRef,\n isDisabled = disabled,\n isRequired,\n isValid,\n label,\n maxLength,\n minimumRows,\n multiline,\n name,\n onBlur,\n onChange,\n onFocus,\n placeholder,\n textFieldRef,\n theme,\n type,\n value,\n afterElement,\n ...forwardedProps\n } = props;\n const textFieldId = useMemo(() => id || `text-field-${uid()}`, [id]);\n const [isFocus, setFocus] = useState(false);\n const { rows, recomputeNumberOfRows } = useComputeNumberOfRows(multiline ? minimumRows || DEFAULT_MIN_ROWS : 0);\n const valueLength = (value || '').length;\n const isNotEmpty = valueLength > 0;\n\n /**\n * Function triggered when the Clear Button is clicked.\n * The idea is to execute the `onChange` callback with an empty string\n * and remove focus from the clear button.\n * @param evt On clear event.\n */\n const onClear = (evt: React.ChangeEvent) => {\n evt.nativeEvent.preventDefault();\n evt.nativeEvent.stopPropagation();\n (evt.currentTarget as HTMLElement).blur();\n\n onChange('');\n };\n\n return (\n <div\n ref={ref}\n className={classNames(\n className,\n handleBasicClasses({\n hasChips: Boolean(chips),\n hasError: !isValid && hasError,\n hasIcon: Boolean(icon),\n hasInput: !multiline,\n hasInputClear: clearButtonProps && isNotEmpty,\n hasLabel: Boolean(label),\n hasPlaceholder: Boolean(placeholder),\n hasTextarea: multiline,\n hasValue: Boolean(value),\n isDisabled,\n isFocus: isFocus || forceFocusStyle,\n isValid,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n {(label || maxLength) && (\n <div className={`${CLASSNAME}__header`}>\n {label && (\n <InputLabel\n htmlFor={textFieldId}\n className={`${CLASSNAME}__label`}\n isRequired={isRequired}\n theme={theme}\n >\n {label}\n </InputLabel>\n )}\n\n {maxLength && (\n <div className={`${CLASSNAME}__char-counter`}>\n <span>{maxLength - valueLength}</span>\n {maxLength - valueLength === 0 && <Icon icon={mdiAlertCircle} size={Size.xxs} />}\n </div>\n )}\n </div>\n )}\n\n <div className={`${CLASSNAME}__wrapper`} ref={textFieldRef}>\n {icon && (\n <Icon\n className={`${CLASSNAME}__input-icon`}\n color={theme === Theme.dark ? 'light' : undefined}\n icon={icon}\n size={Size.xs}\n />\n )}\n\n {chips && (\n <div className={`${CLASSNAME}__chips`}>\n {chips}\n\n {renderInputNative({\n id: textFieldId,\n inputRef,\n isDisabled,\n isRequired,\n maxLength,\n multiline,\n onBlur,\n onChange,\n onFocus,\n placeholder,\n recomputeNumberOfRows,\n rows,\n setFocus,\n type,\n value,\n name,\n ...forwardedProps,\n })}\n </div>\n )}\n\n {!chips && (\n <div className={`${CLASSNAME}__input-wrapper`}>\n {renderInputNative({\n id: textFieldId,\n inputRef,\n isDisabled,\n isRequired,\n maxLength,\n multiline,\n onBlur,\n onChange,\n onFocus,\n placeholder,\n recomputeNumberOfRows,\n rows,\n setFocus,\n type,\n value,\n name,\n ...forwardedProps,\n })}\n </div>\n )}\n\n {(isValid || hasError) && (\n <Icon\n className={`${CLASSNAME}__input-validity`}\n color={theme === Theme.dark ? 'light' : undefined}\n icon={isValid ? mdiCheckCircle : mdiAlertCircle}\n size={Size.xxs}\n />\n )}\n\n {clearButtonProps && isNotEmpty && (\n <IconButton\n {...clearButtonProps}\n className={`${CLASSNAME}__input-clear`}\n icon={mdiCloseCircle}\n emphasis={Emphasis.low}\n size={Size.s}\n theme={theme}\n onClick={onClear}\n type=\"button\"\n />\n )}\n\n {afterElement && <div className={`${CLASSNAME}__after-element`}>{afterElement}</div>}\n </div>\n\n {hasError && error && (\n <InputHelper className={`${CLASSNAME}__helper`} kind={Kind.error} theme={theme}>\n {error}\n </InputHelper>\n )}\n\n {helper && (\n <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>\n {helper}\n </InputHelper>\n )}\n </div>\n );\n});\nTextField.displayName = COMPONENT_NAME;\nTextField.className = CLASSNAME;\nTextField.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_MIN_ROWS","DEFAULT_PROPS","theme","Theme","light","type","useComputeNumberOfRows","minimumRows","useState","rows","setRows","recompute","target","currentRows","scrollHeight","clientHeight","recomputeNumberOfRows","renderInputNative","props","id","isDisabled","isRequired","placeholder","multiline","value","setFocus","onChange","onFocus","onBlur","inputRef","name","forwardedProps","ref","useRef","useEffect","current","onTextFieldFocus","event","onTextFieldBlur","handleChange","get","Component","inputProps","className","disabled","required","mergeRefs","TextField","forwardRef","chips","clearButtonProps","error","forceFocusStyle","hasError","helper","icon","isValid","label","maxLength","textFieldRef","afterElement","textFieldId","useMemo","uid","isFocus","valueLength","length","isNotEmpty","onClear","evt","nativeEvent","preventDefault","stopPropagation","currentTarget","blur","classNames","handleBasicClasses","hasChips","Boolean","hasIcon","hasInput","hasInputClear","hasLabel","hasPlaceholder","hasTextarea","hasValue","prefix","mdiAlertCircle","Size","xxs","dark","undefined","xs","mdiCheckCircle","mdiCloseCircle","Emphasis","low","s","Kind","displayName","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TextField.js","sources":["../../../src/components/text-field/TextField.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, RefObject, SyntheticEvent, useEffect, useMemo, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\nimport get from 'lodash/get';\nimport { uid } from 'uid';\n\nimport { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from '@lumx/icons';\nimport { Emphasis, Icon, IconButton, IconButtonProps, InputHelper, InputLabel, Kind, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\n/**\n * Defines the props of the component.\n */\nexport interface TextFieldProps extends GenericProps {\n /** Chip Group to be rendered before the main text input. */\n chips?: HTMLElement | ReactNode;\n /** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */\n clearButtonProps?: Pick<IconButtonProps, 'label'> &\n Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n /** Error message. */\n error?: string | ReactNode;\n /** Whether we force the focus style or not. */\n forceFocusStyle?: boolean;\n /** Whether the text field is displayed with error style or not. */\n hasError?: boolean;\n /** Additional element to put at the end of the text field. */\n afterElement?: ReactNode;\n /** Helper text. */\n helper?: string | ReactNode;\n /** Icon (SVG path). */\n icon?: string;\n /** Native input id property (generated if not provided to link the label element). */\n id?: string;\n /** Reference to the <input> or <textarea> element. */\n inputRef?: RefObject<HTMLInputElement> | RefObject<HTMLTextAreaElement>;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Whether the component is required or not. */\n isRequired?: boolean;\n /** Whether the text field is displayed with valid style or not. */\n isValid?: boolean;\n /** Label text. */\n label?: string;\n /** Max string length the input accepts (constrains the input and displays a character counter). */\n maxLength?: number;\n /** Minimum number of rows displayed in multiline mode (requires `multiline` to be enabled). */\n minimumRows?: number;\n /** Whether the text field is a textarea or an input. */\n multiline?: boolean;\n /** Native input name property. */\n name?: string;\n /** Placeholder text. */\n placeholder?: string;\n /** Reference to the wrapper. */\n textFieldRef?: RefObject<HTMLDivElement>;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Value. */\n value?: string;\n /** On blur callback. */\n onBlur?(event: React.FocusEvent): void;\n /** On change callback. */\n onChange(value: string, name?: string, event?: SyntheticEvent): void;\n /** On focus callback. */\n onFocus?(event: React.FocusEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TextField';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Default minimum number of rows in the multiline mode.\n */\nconst DEFAULT_MIN_ROWS = 2;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TextFieldProps> = {\n theme: Theme.light,\n type: 'text',\n};\n\n/**\n * Hook that allows to calculate the number of rows needed for a text area.\n * @param minimumRows Minimum number of rows that we want to display.\n * @return rows to be used and a callback to recalculate\n */\nconst useComputeNumberOfRows = (\n minimumRows: number,\n): {\n /** number of rows to be used on the text area */\n rows: number;\n /**\n * Callback in order to recalculate the number of rows due to a change on the text area\n */\n recomputeNumberOfRows(target: Element): void;\n} => {\n const [rows, setRows] = useState(minimumRows);\n\n const recompute = (target: Element) => {\n /**\n * HEAD's UP! This part is a little bit tricky. The idea here is to only\n * display the necessary rows on the textarea. In order to dynamically adjust\n * the height on that field, we need to:\n * 1. Set the current amount of rows to the minimum. That will make the scroll appear.\n * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content\n * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height\n * by the line height.\n * 4. With that number, we can readjust the number of rows on the text area. We need to do that here, if we leave that to\n * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)\n * when we will not see the update and the rows will be resized to the minimum.\n * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows\n * on the state in order to allow React to re-render. Therefore, we save them using `useState`\n */\n // eslint-disable-next-line no-param-reassign\n (target as HTMLTextAreaElement).rows = minimumRows;\n let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);\n currentRows = currentRows >= minimumRows ? currentRows : minimumRows;\n // eslint-disable-next-line no-param-reassign\n (target as HTMLTextAreaElement).rows = currentRows;\n\n setRows(currentRows);\n };\n\n return {\n recomputeNumberOfRows: recompute,\n rows,\n };\n};\n\ninterface InputNativeProps {\n id?: string;\n inputRef?: RefObject<HTMLInputElement> | RefObject<HTMLTextAreaElement>;\n isDisabled?: boolean;\n isRequired?: boolean;\n multiline?: boolean;\n maxLength?: number;\n placeholder?: string;\n rows: number;\n type: string;\n name?: string;\n value?: string;\n setFocus(focus: boolean): void;\n recomputeNumberOfRows(target: Element): void;\n onChange(value: string, name?: string, event?: SyntheticEvent): void;\n onFocus?(value: React.FocusEvent): void;\n onBlur?(value: React.FocusEvent): void;\n}\n\nconst renderInputNative: React.FC<InputNativeProps> = (props) => {\n const {\n id,\n isDisabled,\n isRequired,\n placeholder,\n multiline,\n value,\n setFocus,\n onChange,\n onFocus,\n onBlur,\n inputRef,\n rows,\n recomputeNumberOfRows,\n type,\n name,\n ...forwardedProps\n } = props;\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const ref = useRef<HTMLElement>(null);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n // Recompute the number of rows for the first rendering\n if (multiline && ref && ref.current) {\n recomputeNumberOfRows(ref.current);\n }\n }, [ref, multiline, recomputeNumberOfRows, value]);\n\n const onTextFieldFocus = (event: React.FocusEvent) => {\n onFocus?.(event);\n setFocus(true);\n };\n\n const onTextFieldBlur = (event: React.FocusEvent) => {\n onBlur?.(event);\n setFocus(false);\n };\n\n const handleChange = (event: React.ChangeEvent) => {\n onChange(get(event, 'target.value'), name, event);\n };\n\n const Component = multiline ? 'textarea' : 'input';\n const inputProps: any = {\n ...forwardedProps,\n id,\n className: multiline\n ? `${CLASSNAME}__input-native ${CLASSNAME}__input-native--textarea`\n : `${CLASSNAME}__input-native ${CLASSNAME}__input-native--text`,\n placeholder,\n value,\n name,\n disabled: isDisabled,\n required: isRequired,\n onFocus: onTextFieldFocus,\n onBlur: onTextFieldBlur,\n onChange: handleChange,\n ref: mergeRefs(inputRef as any, ref) as any,\n };\n if (multiline) {\n inputProps.rows = rows;\n } else {\n inputProps.type = type;\n }\n return <Component {...inputProps} />;\n};\n\n/**\n * TextField component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n chips,\n className,\n clearButtonProps,\n disabled,\n error,\n forceFocusStyle,\n hasError,\n helper,\n icon,\n id,\n inputRef,\n isDisabled = disabled,\n isRequired,\n isValid,\n label,\n maxLength,\n minimumRows,\n multiline,\n name,\n onBlur,\n onChange,\n onFocus,\n placeholder,\n textFieldRef,\n theme,\n type,\n value,\n afterElement,\n ...forwardedProps\n } = props;\n const textFieldId = useMemo(() => id || `text-field-${uid()}`, [id]);\n const [isFocus, setFocus] = useState(false);\n const { rows, recomputeNumberOfRows } = useComputeNumberOfRows(multiline ? minimumRows || DEFAULT_MIN_ROWS : 0);\n const valueLength = (value || '').length;\n const isNotEmpty = valueLength > 0;\n\n /**\n * Function triggered when the Clear Button is clicked.\n * The idea is to execute the `onChange` callback with an empty string\n * and remove focus from the clear button.\n * @param evt On clear event.\n */\n const onClear = (evt: React.ChangeEvent) => {\n evt.nativeEvent.preventDefault();\n evt.nativeEvent.stopPropagation();\n (evt.currentTarget as HTMLElement).blur();\n\n onChange('');\n };\n\n return (\n <div\n ref={ref}\n className={classNames(\n className,\n handleBasicClasses({\n hasChips: Boolean(chips),\n hasError: !isValid && hasError,\n hasIcon: Boolean(icon),\n hasInput: !multiline,\n hasInputClear: clearButtonProps && isNotEmpty,\n hasLabel: Boolean(label),\n hasPlaceholder: Boolean(placeholder),\n hasTextarea: multiline,\n hasValue: Boolean(value),\n isDisabled,\n isFocus: isFocus || forceFocusStyle,\n isValid,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n {(label || maxLength) && (\n <div className={`${CLASSNAME}__header`}>\n {label && (\n <InputLabel\n htmlFor={textFieldId}\n className={`${CLASSNAME}__label`}\n isRequired={isRequired}\n theme={theme}\n >\n {label}\n </InputLabel>\n )}\n\n {maxLength && (\n <div className={`${CLASSNAME}__char-counter`}>\n <span>{maxLength - valueLength}</span>\n {maxLength - valueLength === 0 && <Icon icon={mdiAlertCircle} size={Size.xxs} />}\n </div>\n )}\n </div>\n )}\n\n <div className={`${CLASSNAME}__wrapper`} ref={textFieldRef}>\n {icon && (\n <Icon\n className={`${CLASSNAME}__input-icon`}\n color={theme === Theme.dark ? 'light' : undefined}\n icon={icon}\n size={Size.xs}\n />\n )}\n\n {chips && (\n <div className={`${CLASSNAME}__chips`}>\n {chips}\n\n {renderInputNative({\n id: textFieldId,\n inputRef,\n isDisabled,\n isRequired,\n maxLength,\n multiline,\n onBlur,\n onChange,\n onFocus,\n placeholder,\n recomputeNumberOfRows,\n rows,\n setFocus,\n type,\n value,\n name,\n ...forwardedProps,\n })}\n </div>\n )}\n\n {!chips && (\n <div className={`${CLASSNAME}__input-wrapper`}>\n {renderInputNative({\n id: textFieldId,\n inputRef,\n isDisabled,\n isRequired,\n maxLength,\n multiline,\n onBlur,\n onChange,\n onFocus,\n placeholder,\n recomputeNumberOfRows,\n rows,\n setFocus,\n type,\n value,\n name,\n ...forwardedProps,\n })}\n </div>\n )}\n\n {(isValid || hasError) && (\n <Icon\n className={`${CLASSNAME}__input-validity`}\n color={theme === Theme.dark ? 'light' : undefined}\n icon={isValid ? mdiCheckCircle : mdiAlertCircle}\n size={Size.xxs}\n />\n )}\n\n {clearButtonProps && isNotEmpty && (\n <IconButton\n {...clearButtonProps}\n className={`${CLASSNAME}__input-clear`}\n icon={mdiCloseCircle}\n emphasis={Emphasis.low}\n size={Size.s}\n theme={theme}\n onClick={onClear}\n type=\"button\"\n />\n )}\n\n {afterElement && <div className={`${CLASSNAME}__after-element`}>{afterElement}</div>}\n </div>\n\n {hasError && error && (\n <InputHelper className={`${CLASSNAME}__helper`} kind={Kind.error} theme={theme}>\n {error}\n </InputHelper>\n )}\n\n {helper && (\n <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>\n {helper}\n </InputHelper>\n )}\n </div>\n );\n});\nTextField.displayName = COMPONENT_NAME;\nTextField.className = CLASSNAME;\nTextField.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_MIN_ROWS","DEFAULT_PROPS","theme","Theme","light","type","useComputeNumberOfRows","minimumRows","useState","rows","setRows","recompute","target","currentRows","scrollHeight","clientHeight","recomputeNumberOfRows","renderInputNative","props","id","isDisabled","isRequired","placeholder","multiline","value","setFocus","onChange","onFocus","onBlur","inputRef","name","forwardedProps","ref","useRef","useEffect","current","onTextFieldFocus","event","onTextFieldBlur","handleChange","get","Component","inputProps","className","disabled","required","mergeRefs","TextField","forwardRef","chips","clearButtonProps","error","forceFocusStyle","hasError","helper","icon","isValid","label","maxLength","textFieldRef","afterElement","textFieldId","useMemo","uid","isFocus","valueLength","length","isNotEmpty","onClear","evt","nativeEvent","preventDefault","stopPropagation","currentTarget","blur","classNames","handleBasicClasses","hasChips","Boolean","hasIcon","hasInput","hasInputClear","hasLabel","hasPlaceholder","hasTextarea","hasValue","prefix","mdiAlertCircle","Size","xxs","dark","undefined","xs","mdiCheckCircle","mdiCloseCircle","Emphasis","low","s","Kind","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -2,9 +2,8 @@ import { d as _slicedToArray, b as _objectWithoutProperties, _ as _objectSpread2
|
|
|
2
2
|
import { AspectRatio, Size, Theme } from './components.js';
|
|
3
3
|
import React, { useState, useEffect, useMemo, forwardRef } from 'react';
|
|
4
4
|
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
5
|
-
import { r as mdiImageBroken } from './
|
|
5
|
+
import { I as Icon, r as mdiImageBroken } from './Icon2.js';
|
|
6
6
|
import { m as mergeRefs } from './mergeRefs.js';
|
|
7
|
-
import { I as Icon } from './Icon2.js';
|
|
8
7
|
|
|
9
8
|
function getState(img, event) {
|
|
10
9
|
// Error event occurred or image loaded empty.
|
|
@@ -261,7 +260,11 @@ var Thumbnail = forwardRef(function (props, ref) {
|
|
|
261
260
|
}, React.createElement("img", _extends({}, imgProps, {
|
|
262
261
|
style: _objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style, {}, imageErrorStyle, {}, focusPointStyle),
|
|
263
262
|
ref: mergeRefs(setImgElement, propImgRef),
|
|
264
|
-
className: classnames(
|
|
263
|
+
className: classnames(handleBasicClasses({
|
|
264
|
+
prefix: "".concat(CLASSNAME, "__image"),
|
|
265
|
+
isLoading: isLoading,
|
|
266
|
+
hasDefinedSize: Boolean((imgProps === null || imgProps === void 0 ? void 0 : imgProps.height) && imgProps.width)
|
|
267
|
+
})),
|
|
265
268
|
crossOrigin: crossOrigin,
|
|
266
269
|
src: image,
|
|
267
270
|
alt: alt,
|
|
@@ -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, GenericProps, getRootClassName, handleBasicClasses } 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 {\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;\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 /** Theme adapting the component to light or dark background. */\n theme?: Theme;\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,\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(`${CLASSNAME}__image`, isLoading && `${CLASSNAME}__image--is-loading`)}\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","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.\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, GenericProps, getRootClassName, handleBasicClasses } 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 {\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;\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 /** Theme adapting the component to light or dark background. */\n theme?: Theme;\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,\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 )}\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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"}
|
|
@@ -2,7 +2,7 @@ import './_rollupPluginBabelHelpers.js';
|
|
|
2
2
|
import './components.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
import './getRootClassName.js';
|
|
5
|
-
import './
|
|
5
|
+
import './Icon2.js';
|
|
6
6
|
import '../index2.js';
|
|
7
7
|
import 'lodash/isBoolean';
|
|
8
8
|
import 'lodash/isEmpty';
|
|
@@ -29,7 +29,6 @@ import './Dialog2.js';
|
|
|
29
29
|
import 'lodash/pull';
|
|
30
30
|
import './useDelayedVisibility.js';
|
|
31
31
|
import './useDisableBodyScroll.js';
|
|
32
|
-
import './Icon2.js';
|
|
33
32
|
import './Progress2.js';
|
|
34
33
|
import './Toolbar2.js';
|
|
35
34
|
//# sourceMappingURL=alert-dialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-dialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"alert-dialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2,7 +2,7 @@ import './_rollupPluginBabelHelpers.js';
|
|
|
2
2
|
import './components.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
import './getRootClassName.js';
|
|
5
|
-
import './
|
|
5
|
+
import './Icon2.js';
|
|
6
6
|
import '../index2.js';
|
|
7
7
|
import 'lodash/isBoolean';
|
|
8
8
|
import 'lodash/isEmpty';
|
|
@@ -24,7 +24,6 @@ import './ClickAwayProvider.js';
|
|
|
24
24
|
import 'lodash/pull';
|
|
25
25
|
import './List2.js';
|
|
26
26
|
import './Dropdown2.js';
|
|
27
|
-
import './Icon2.js';
|
|
28
27
|
import './InputHelper.js';
|
|
29
28
|
import './InputLabel.js';
|
|
30
29
|
import './TextField.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"autocomplete.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/esm/_internal/avatar.js
CHANGED
|
@@ -2,13 +2,12 @@ import './_rollupPluginBabelHelpers.js';
|
|
|
2
2
|
import './components.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
import './getRootClassName.js';
|
|
5
|
-
import './
|
|
5
|
+
import './Icon2.js';
|
|
6
6
|
import 'lodash/isBoolean';
|
|
7
7
|
import 'lodash/isEmpty';
|
|
8
8
|
import 'lodash/kebabCase';
|
|
9
9
|
import 'lodash/noop';
|
|
10
10
|
import './mergeRefs.js';
|
|
11
11
|
export { A as Avatar } from './Avatar2.js';
|
|
12
|
-
import './Icon2.js';
|
|
13
12
|
import './Thumbnail2.js';
|
|
14
13
|
//# sourceMappingURL=avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"avatar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
|
package/esm/_internal/button.js
CHANGED
|
@@ -2,6 +2,7 @@ import './_rollupPluginBabelHelpers.js';
|
|
|
2
2
|
import './components.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
import './getRootClassName.js';
|
|
5
|
+
import './Icon2.js';
|
|
5
6
|
import '../index2.js';
|
|
6
7
|
import 'lodash/isBoolean';
|
|
7
8
|
import 'lodash/isEmpty';
|
|
@@ -19,7 +20,6 @@ export { B as ButtonGroup } from './ButtonGroup.js';
|
|
|
19
20
|
import 'react-dom';
|
|
20
21
|
import './ClickAwayProvider.js';
|
|
21
22
|
import 'lodash/pull';
|
|
22
|
-
import './Icon2.js';
|
|
23
23
|
import './Tooltip2.js';
|
|
24
24
|
import 'lodash/debounce';
|
|
25
25
|
//# sourceMappingURL=button.js.map
|
|
@@ -2,14 +2,13 @@ import './_rollupPluginBabelHelpers.js';
|
|
|
2
2
|
import './components.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
import './getRootClassName.js';
|
|
5
|
-
import './
|
|
5
|
+
import './Icon2.js';
|
|
6
6
|
import '../index2.js';
|
|
7
7
|
import 'lodash/isBoolean';
|
|
8
8
|
import 'lodash/isEmpty';
|
|
9
9
|
import 'lodash/kebabCase';
|
|
10
10
|
import 'lodash/noop';
|
|
11
11
|
export { C as Checkbox } from './Checkbox2.js';
|
|
12
|
-
import './Icon2.js';
|
|
13
12
|
import './InputHelper.js';
|
|
14
13
|
import './InputLabel.js';
|
|
15
14
|
//# sourceMappingURL=checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
|
|
@@ -2,7 +2,7 @@ import './_rollupPluginBabelHelpers.js';
|
|
|
2
2
|
import './components.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
import './getRootClassName.js';
|
|
5
|
-
import './
|
|
5
|
+
import './Icon2.js';
|
|
6
6
|
import 'lodash/isBoolean';
|
|
7
7
|
import 'lodash/isEmpty';
|
|
8
8
|
import 'lodash/kebabCase';
|
|
@@ -11,6 +11,5 @@ import './mergeRefs.js';
|
|
|
11
11
|
import './Avatar2.js';
|
|
12
12
|
import 'lodash/isFunction';
|
|
13
13
|
export { a as CommentBlock, C as CommentBlockVariant } from './CommentBlock.js';
|
|
14
|
-
import './Icon2.js';
|
|
15
14
|
import './Thumbnail2.js';
|
|
16
15
|
//# sourceMappingURL=comment-block.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"comment-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"comment-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|
|
@@ -2,7 +2,7 @@ import './_rollupPluginBabelHelpers.js';
|
|
|
2
2
|
import './components.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
import './getRootClassName.js';
|
|
5
|
-
import './
|
|
5
|
+
import './Icon2.js';
|
|
6
6
|
import '../index2.js';
|
|
7
7
|
import 'lodash/isBoolean';
|
|
8
8
|
import 'lodash/isEmpty';
|
|
@@ -23,7 +23,6 @@ import './useFocusTrap.js';
|
|
|
23
23
|
import 'react-dom';
|
|
24
24
|
import './ClickAwayProvider.js';
|
|
25
25
|
import 'lodash/pull';
|
|
26
|
-
import './Icon2.js';
|
|
27
26
|
import './InputHelper.js';
|
|
28
27
|
import './InputLabel.js';
|
|
29
28
|
import './TextField.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"date-picker.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2,11 +2,10 @@ import './_rollupPluginBabelHelpers.js';
|
|
|
2
2
|
import './components.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
import './getRootClassName.js';
|
|
5
|
-
import './
|
|
5
|
+
import './Icon2.js';
|
|
6
6
|
import 'lodash/isBoolean';
|
|
7
7
|
import 'lodash/isEmpty';
|
|
8
8
|
import 'lodash/kebabCase';
|
|
9
9
|
import 'lodash/noop';
|
|
10
10
|
export { D as DragHandle } from './DragHandle.js';
|
|
11
|
-
import './Icon2.js';
|
|
12
11
|
//# sourceMappingURL=drag-handle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drag-handle.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"drag-handle.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -2,7 +2,7 @@ import './_rollupPluginBabelHelpers.js';
|
|
|
2
2
|
import './components.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
import './getRootClassName.js';
|
|
5
|
-
import './
|
|
5
|
+
import './Icon2.js';
|
|
6
6
|
import '../index2.js';
|
|
7
7
|
import 'lodash/isBoolean';
|
|
8
8
|
import 'lodash/isEmpty';
|
|
@@ -28,7 +28,6 @@ import './ClickAwayProvider.js';
|
|
|
28
28
|
import 'lodash/pull';
|
|
29
29
|
import './DragHandle.js';
|
|
30
30
|
export { E as ExpansionPanel } from './ExpansionPanel.js';
|
|
31
|
-
import './Icon2.js';
|
|
32
31
|
import './Tooltip2.js';
|
|
33
32
|
import 'lodash/debounce';
|
|
34
33
|
//# sourceMappingURL=expansion-panel.js.map
|