@lumx/react 3.20.1-alpha.29 → 3.20.1-alpha.30
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/_internal/Button-4b67daa8.js +98 -0
- package/_internal/Button-4b67daa8.js.map +1 -0
- package/_internal/ButtonRoot-a70baf82.js +118 -0
- package/_internal/ButtonRoot-a70baf82.js.map +1 -0
- package/_internal/Chip-70af04b4.js +144 -0
- package/_internal/Chip-70af04b4.js.map +1 -0
- package/_internal/ClickAwayProvider-1204f237.js +95 -0
- package/_internal/ClickAwayProvider-1204f237.js.map +1 -0
- package/_internal/DisabledStateContext-ea04260d.js +29 -0
- package/_internal/DisabledStateContext-ea04260d.js.map +1 -0
- package/_internal/HeadingLevelProvider-ebdcb0c7.js +61 -0
- package/_internal/HeadingLevelProvider-ebdcb0c7.js.map +1 -0
- package/_internal/IconButton-8d61f5be.js +77 -0
- package/_internal/IconButton-8d61f5be.js.map +1 -0
- package/_internal/ImageCaption-db44ec9e.js +75 -0
- package/_internal/ImageCaption-db44ec9e.js.map +1 -0
- package/_internal/List-c75646f2.js +818 -0
- package/_internal/List-c75646f2.js.map +1 -0
- package/_internal/PopoverDialog-35b2d87d.js +657 -0
- package/_internal/PopoverDialog-35b2d87d.js.map +1 -0
- package/_internal/Portal-3f86608e.js +45 -0
- package/_internal/Portal-3f86608e.js.map +1 -0
- package/_internal/RawClickable-2c2b6a89.js +52 -0
- package/_internal/RawClickable-2c2b6a89.js.map +1 -0
- package/_internal/Slides-ce641b5f.js +679 -0
- package/_internal/Slides-ce641b5f.js.map +1 -0
- package/_internal/ThemeContext-3181f000.js +14 -0
- package/_internal/ThemeContext-3181f000.js.map +1 -0
- package/_internal/Thumbnail-02bd6869.js +314 -0
- package/_internal/Thumbnail-02bd6869.js.map +1 -0
- package/_internal/components/alert-dialog-a24330ed.js +166 -0
- package/_internal/components/alert-dialog-a24330ed.js.map +1 -0
- package/_internal/components/autocomplete-70749e51.js +262 -0
- package/_internal/components/autocomplete-70749e51.js.map +1 -0
- package/_internal/components/avatar-ed9f4869.js +84 -0
- package/_internal/components/avatar-ed9f4869.js.map +1 -0
- package/_internal/components/badge-ccf47147.js +82 -0
- package/_internal/components/badge-ccf47147.js.map +1 -0
- package/_internal/components/button-9f710830.js +48 -0
- package/_internal/components/button-9f710830.js.map +1 -0
- package/_internal/components/checkbox-8ab51ef9.js +142 -0
- package/_internal/components/checkbox-8ab51ef9.js.map +1 -0
- package/_internal/components/chip-19e40755.js +103 -0
- package/_internal/components/chip-19e40755.js.map +1 -0
- package/_internal/components/comment-block-bb6a0603.js +139 -0
- package/_internal/components/comment-block-bb6a0603.js.map +1 -0
- package/_internal/components/date-picker-e4209b01.js +2 -0
- package/_internal/components/date-picker-e4209b01.js.map +1 -0
- package/_internal/components/dialog-30336ccb.js +239 -0
- package/_internal/components/dialog-30336ccb.js.map +1 -0
- package/_internal/components/divider-0e93aa3d.js +51 -0
- package/_internal/components/divider-0e93aa3d.js.map +1 -0
- package/_internal/components/drag-handle-ba2e7e67.js +52 -0
- package/_internal/components/drag-handle-ba2e7e67.js.map +1 -0
- package/_internal/components/dropdown-d18122d7.js +148 -0
- package/_internal/components/dropdown-d18122d7.js.map +1 -0
- package/_internal/components/expansion-panel-0b263437.js +169 -0
- package/_internal/components/expansion-panel-0b263437.js.map +1 -0
- package/_internal/components/flag-8f9a498a.js +60 -0
- package/_internal/components/flag-8f9a498a.js.map +1 -0
- package/_internal/components/flex-box-15be92f6.js +57 -0
- package/_internal/components/flex-box-15be92f6.js.map +1 -0
- package/_internal/components/generic-block-5d843f1e.js +128 -0
- package/_internal/components/generic-block-5d843f1e.js.map +1 -0
- package/_internal/components/grid-8c08dc4b.js +105 -0
- package/_internal/components/grid-8c08dc4b.js.map +1 -0
- package/_internal/components/grid-column-85e305e7.js +59 -0
- package/_internal/components/grid-column-85e305e7.js.map +1 -0
- package/_internal/components/heading-7bfafd7d.js +54 -0
- package/_internal/components/heading-7bfafd7d.js.map +1 -0
- package/_internal/components/icon-ee15673b.js +103 -0
- package/_internal/components/icon-ee15673b.js.map +1 -0
- package/_internal/components/image-block-3479abda.js +111 -0
- package/_internal/components/image-block-3479abda.js.map +1 -0
- package/_internal/components/image-lightbox-1d7ca133.js +758 -0
- package/_internal/components/image-lightbox-1d7ca133.js.map +1 -0
- package/_internal/components/inline-list-5ba8bb0f.js +75 -0
- package/_internal/components/inline-list-5ba8bb0f.js.map +1 -0
- package/_internal/components/input-helper-2e4e49fd.js +72 -0
- package/_internal/components/input-helper-2e4e49fd.js.map +1 -0
- package/_internal/components/input-label-30d199c3.js +60 -0
- package/_internal/components/input-label-30d199c3.js.map +1 -0
- package/_internal/components/lightbox-c5f9afd0.js +156 -0
- package/_internal/components/lightbox-c5f9afd0.js.map +1 -0
- package/_internal/components/link-43ee103e.js +73 -0
- package/_internal/components/link-43ee103e.js.map +1 -0
- package/_internal/components/link-preview-db0ee2d6.js +118 -0
- package/_internal/components/link-preview-db0ee2d6.js.map +1 -0
- package/_internal/components/list-2f256244.js +72 -0
- package/_internal/components/list-2f256244.js.map +1 -0
- package/_internal/components/message-f7674e0e.js +101 -0
- package/_internal/components/message-f7674e0e.js.map +1 -0
- package/_internal/components/mosaic-3effd0cf.js +95 -0
- package/_internal/components/mosaic-3effd0cf.js.map +1 -0
- package/_internal/components/navigation-3a5dc270.js +227 -0
- package/_internal/components/navigation-3a5dc270.js.map +1 -0
- package/_internal/components/notification-098c5600.js +146 -0
- package/_internal/components/notification-098c5600.js.map +1 -0
- package/_internal/components/popover-dfcddda4.js +3 -0
- package/_internal/components/popover-dfcddda4.js.map +1 -0
- package/_internal/components/post-block-69797e4d.js +110 -0
- package/_internal/components/post-block-69797e4d.js.map +1 -0
- package/_internal/components/progress-44bb0301.js +183 -0
- package/_internal/components/progress-44bb0301.js.map +1 -0
- package/_internal/components/progress-tracker-e0981fcc.js +309 -0
- package/_internal/components/progress-tracker-e0981fcc.js.map +1 -0
- package/_internal/components/radio-button-929c7bee.js +150 -0
- package/_internal/components/radio-button-929c7bee.js.map +1 -0
- package/_internal/components/select-64bc72a0.js +458 -0
- package/_internal/components/select-64bc72a0.js.map +1 -0
- package/_internal/components/side-navigation-c610c689.js +166 -0
- package/_internal/components/side-navigation-c610c689.js.map +1 -0
- package/_internal/components/skeleton-1ea8c82a.js +167 -0
- package/_internal/components/skeleton-1ea8c82a.js.map +1 -0
- package/_internal/components/slider-78cfaa67.js +312 -0
- package/_internal/components/slider-78cfaa67.js.map +1 -0
- package/_internal/components/slideshow-d8a943a7.js +151 -0
- package/_internal/components/slideshow-d8a943a7.js.map +1 -0
- package/_internal/components/switch-25b65051.js +122 -0
- package/_internal/components/switch-25b65051.js.map +1 -0
- package/_internal/components/table-ec20c66c.js +296 -0
- package/_internal/components/table-ec20c66c.js.map +1 -0
- package/_internal/components/tabs-89c055bd.js +299 -0
- package/_internal/components/tabs-89c055bd.js.map +1 -0
- package/_internal/components/text-d04d0f1b.js +2 -0
- package/_internal/components/text-d04d0f1b.js.map +1 -0
- package/_internal/components/text-field-8f13957e.js +361 -0
- package/_internal/components/text-field-8f13957e.js.map +1 -0
- package/_internal/components/thumbnail-1255957f.js +42 -0
- package/_internal/components/thumbnail-1255957f.js.map +1 -0
- package/_internal/components/toolbar-e7c984e6.js +62 -0
- package/_internal/components/toolbar-e7c984e6.js.map +1 -0
- package/_internal/components/tooltip-dcb43bbe.js +328 -0
- package/_internal/components/tooltip-dcb43bbe.js.map +1 -0
- package/_internal/components/uploader-7ef4db39.js +154 -0
- package/_internal/components/uploader-7ef4db39.js.map +1 -0
- package/_internal/components/user-block-24d97650.js +145 -0
- package/_internal/components/user-block-24d97650.js.map +1 -0
- package/_internal/constants-43721918.js +2170 -0
- package/_internal/constants-43721918.js.map +1 -0
- package/_internal/constants-d0e3f49e.js +24 -0
- package/_internal/constants-d0e3f49e.js.map +1 -0
- package/_internal/context-9d1336a1.js +19 -0
- package/_internal/context-9d1336a1.js.map +1 -0
- package/_internal/forwardRef-8bce732e.js +9 -0
- package/_internal/forwardRef-8bce732e.js.map +1 -0
- package/_internal/getFocusableElements-230173a8.js +13 -0
- package/_internal/getFocusableElements-230173a8.js.map +1 -0
- package/_internal/index-25c9e8c2.js +118 -0
- package/_internal/index-25c9e8c2.js.map +1 -0
- package/_internal/index-25d2a45e.js +437 -0
- package/_internal/index-25d2a45e.js.map +1 -0
- package/_internal/isComponent-b9762ff1.js +18 -0
- package/_internal/isComponent-b9762ff1.js.map +1 -0
- package/_internal/isComponentType-e806b848.js +9 -0
- package/_internal/isComponentType-e806b848.js.map +1 -0
- package/_internal/mergeRefs-f0d7d6ea.js +30 -0
- package/_internal/mergeRefs-f0d7d6ea.js.map +1 -0
- package/_internal/state-db358714.js +130 -0
- package/_internal/state-db358714.js.map +1 -0
- package/_internal/useBooleanState-2a3d237c.js +12 -0
- package/_internal/useBooleanState-2a3d237c.js.map +1 -0
- package/_internal/useCallbackOnEscape-b956a85d.js +64 -0
- package/_internal/useCallbackOnEscape-b956a85d.js.map +1 -0
- package/_internal/useDisableBodyScroll-36bd7352.js +219 -0
- package/_internal/useDisableBodyScroll-36bd7352.js.map +1 -0
- package/_internal/useDisableStateProps-69e16b7c.js +36 -0
- package/_internal/useDisableStateProps-69e16b7c.js.map +1 -0
- package/_internal/useFocusTrap-2dbae79e.js +112 -0
- package/_internal/useFocusTrap-2dbae79e.js.map +1 -0
- package/_internal/useId-3a1facc0.js +18 -0
- package/_internal/useId-3a1facc0.js.map +1 -0
- package/_internal/useRovingTabIndex-7daf0f24.js +77 -0
- package/_internal/useRovingTabIndex-7daf0f24.js.map +1 -0
- package/_internal/useTransitionVisibility-321fdbfa.js +50 -0
- package/_internal/useTransitionVisibility-321fdbfa.js.map +1 -0
- package/_internal/wrapChildrenIconWithSpaces-50d705e6.js +20 -0
- package/_internal/wrapChildrenIconWithSpaces-50d705e6.js.map +1 -0
- package/index.js +63 -14033
- package/index.js.map +1 -1
- package/package.json +3 -3
- package/utils/index.js +3 -158
- package/utils/index.js.map +1 -1
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import classNames from 'classnames';
|
|
2
|
+
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
3
|
+
import { f as forwardRef } from '../forwardRef-8bce732e.js';
|
|
4
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
5
|
+
import { ColorPalette } from '@lumx/core/js/constants';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Component display name.
|
|
9
|
+
*/
|
|
10
|
+
const COMPONENT_NAME$1 = 'Badge';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Component default class name and class prefix.
|
|
14
|
+
*/
|
|
15
|
+
const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Component default props.
|
|
19
|
+
*/
|
|
20
|
+
const DEFAULT_PROPS = {
|
|
21
|
+
color: ColorPalette.primary
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Badge component.
|
|
26
|
+
*
|
|
27
|
+
* @param props Component props.
|
|
28
|
+
* @param ref Component ref.
|
|
29
|
+
* @return React element.
|
|
30
|
+
*/
|
|
31
|
+
const Badge = forwardRef((props, ref) => {
|
|
32
|
+
const {
|
|
33
|
+
children,
|
|
34
|
+
className,
|
|
35
|
+
color = DEFAULT_PROPS.color,
|
|
36
|
+
...forwardedProps
|
|
37
|
+
} = props;
|
|
38
|
+
return /*#__PURE__*/jsx("div", {
|
|
39
|
+
ref: ref,
|
|
40
|
+
...forwardedProps,
|
|
41
|
+
className: classNames(className, handleBasicClasses({
|
|
42
|
+
prefix: CLASSNAME$1,
|
|
43
|
+
color
|
|
44
|
+
})),
|
|
45
|
+
children: children
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
Badge.displayName = COMPONENT_NAME$1;
|
|
49
|
+
Badge.className = CLASSNAME$1;
|
|
50
|
+
Badge.defaultProps = DEFAULT_PROPS;
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Component display name.
|
|
54
|
+
*/
|
|
55
|
+
const COMPONENT_NAME = 'BadgeWrapper';
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Component default class name and class prefix.
|
|
59
|
+
*/
|
|
60
|
+
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
61
|
+
const BadgeWrapper = forwardRef((props, ref) => {
|
|
62
|
+
const {
|
|
63
|
+
badge,
|
|
64
|
+
children,
|
|
65
|
+
className,
|
|
66
|
+
...forwardedProps
|
|
67
|
+
} = props;
|
|
68
|
+
return /*#__PURE__*/jsxs("div", {
|
|
69
|
+
ref: ref,
|
|
70
|
+
...forwardedProps,
|
|
71
|
+
className: classNames(className, CLASSNAME),
|
|
72
|
+
children: [children, badge && /*#__PURE__*/jsx("div", {
|
|
73
|
+
className: `${CLASSNAME}__badge`,
|
|
74
|
+
children: badge
|
|
75
|
+
})]
|
|
76
|
+
});
|
|
77
|
+
});
|
|
78
|
+
BadgeWrapper.displayName = 'BadgeWrapper';
|
|
79
|
+
BadgeWrapper.className = CLASSNAME;
|
|
80
|
+
|
|
81
|
+
export { Badge, BadgeWrapper };
|
|
82
|
+
//# sourceMappingURL=badge-ccf47147.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"badge-ccf47147.js","sources":["../../../src/components/badge/Badge.tsx","../../../src/components/badge/BadgeWrapper.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ColorPalette } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface BadgeProps extends GenericProps {\n /** Badge content. */\n children?: ReactNode;\n /** Color variant. */\n color?: ColorPalette;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Badge';\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<BadgeProps> = {\n color: ColorPalette.primary,\n};\n\n/**\n * Badge component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Badge = forwardRef<BadgeProps, HTMLDivElement>((props, ref) => {\n const { children, className, color = DEFAULT_PROPS.color, ...forwardedProps } = props;\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color }))}\n >\n {children}\n </div>\n );\n});\nBadge.displayName = COMPONENT_NAME;\nBadge.className = CLASSNAME;\nBadge.defaultProps = DEFAULT_PROPS;\n","import { ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface BadgeWrapperProps extends GenericProps {\n /** Badge. */\n badge: ReactElement;\n /** Node to display the badge on */\n children: ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'BadgeWrapper';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nexport const BadgeWrapper = forwardRef<BadgeWrapperProps, HTMLDivElement>((props, ref) => {\n const { badge, children, className, ...forwardedProps } = props;\n\n return (\n <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n {children}\n {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n </div>\n );\n});\nBadgeWrapper.displayName = 'BadgeWrapper';\nBadgeWrapper.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","color","ColorPalette","primary","Badge","forwardRef","props","ref","children","className","forwardedProps","_jsx","classNames","handleBasicClasses","prefix","displayName","defaultProps","BadgeWrapper","badge","_jsxs"],"mappings":";;;;;;AAmBA;AACA;AACA;AACA,MAAMA,gBAAc,GAAG,OAAO,CAAA;;AAE9B;AACA;AACA;AACA,MAAMC,WAAS,GAAGC,gBAAgB,CAACF,gBAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAkC,GAAG;EACvCC,KAAK,EAAEC,YAAY,CAACC,OAAAA;AACxB,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,GAAGC,UAAU,CAA6B,CAACC,KAAK,EAAEC,GAAG,KAAK;EACxE,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAER,KAAK,GAAGD,aAAa,CAACC,KAAK;IAAE,GAAGS,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AACrF,EAAA,oBACIK,GAAA,CAAA,KAAA,EAAA;AACIJ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLG,cAAc;AAClBD,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAEI,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEhB,WAAS;AAAEG,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;AAAAO,IAAAA,QAAA,EAElFA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAEd,CAAC,EAAC;AACFJ,KAAK,CAACW,WAAW,GAAGlB,gBAAc,CAAA;AAClCO,KAAK,CAACK,SAAS,GAAGX,WAAS,CAAA;AAC3BM,KAAK,CAACY,YAAY,GAAGhB,aAAa;;AC1ClC;AACA;AACA;AACA,MAAMH,cAAc,GAAG,cAAc,CAAA;;AAErC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;AAE3C,MAAMoB,YAAY,GAAGZ,UAAU,CAAoC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACtF,MAAM;IAAEW,KAAK;IAAEV,QAAQ;IAAEC,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AAE/D,EAAA,oBACIa,IAAA,CAAA,KAAA,EAAA;AAAKZ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKG,cAAc;AAAED,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAEX,SAAS,CAAE;AAAAU,IAAAA,QAAA,EAC1EA,CAAAA,QAAQ,EACRU,KAAK,iBAAIP,GAAA,CAAA,KAAA,EAAA;MAAKF,SAAS,EAAE,CAAGX,EAAAA,SAAS,CAAU,OAAA,CAAA;AAAAU,MAAAA,QAAA,EAAEU,KAAAA;AAAK,KAAM,CAAC,CAAA;AAAA,GAC7D,CAAC,CAAA;AAEd,CAAC,EAAC;AACFD,YAAY,CAACF,WAAW,GAAG,cAAc,CAAA;AACzCE,YAAY,CAACR,SAAS,GAAGX,SAAS;;;;"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
export { a as Button, B as ButtonEmphasis } from '../Button-4b67daa8.js';
|
|
2
|
+
export { I as IconButton } from '../IconButton-8d61f5be.js';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { getRootClassName } from '@lumx/core/js/utils/className';
|
|
5
|
+
import { f as forwardRef } from '../forwardRef-8bce732e.js';
|
|
6
|
+
import { jsx } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Component display name.
|
|
10
|
+
*/
|
|
11
|
+
const COMPONENT_NAME = 'ButtonGroup';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Component default class name and class prefix.
|
|
15
|
+
*/
|
|
16
|
+
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Component default props.
|
|
20
|
+
*/
|
|
21
|
+
const DEFAULT_PROPS = {};
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* ButtonGroup component.
|
|
25
|
+
*
|
|
26
|
+
* @param props Component props.
|
|
27
|
+
* @param ref Component ref.
|
|
28
|
+
* @return React element.
|
|
29
|
+
*/
|
|
30
|
+
const ButtonGroup = forwardRef((props, ref) => {
|
|
31
|
+
const {
|
|
32
|
+
children,
|
|
33
|
+
className,
|
|
34
|
+
...forwardedProps
|
|
35
|
+
} = props;
|
|
36
|
+
return /*#__PURE__*/jsx("div", {
|
|
37
|
+
ref: ref,
|
|
38
|
+
...forwardedProps,
|
|
39
|
+
className: classNames(className, CLASSNAME),
|
|
40
|
+
children: children
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
ButtonGroup.displayName = COMPONENT_NAME;
|
|
44
|
+
ButtonGroup.className = CLASSNAME;
|
|
45
|
+
ButtonGroup.defaultProps = DEFAULT_PROPS;
|
|
46
|
+
|
|
47
|
+
export { ButtonGroup };
|
|
48
|
+
//# sourceMappingURL=button-9f710830.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-9f710830.js","sources":["../../../src/components/button/ButtonGroup.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component\n */\nexport interface ButtonGroupProps extends GenericProps {\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ButtonGroup';\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<ButtonGroupProps> = {};\n\n/**\n * ButtonGroup component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const ButtonGroup = forwardRef<ButtonGroupProps, HTMLDivElement>((props, ref) => {\n const { children, className, ...forwardedProps } = props;\n\n return (\n <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n {children}\n </div>\n );\n});\nButtonGroup.displayName = COMPONENT_NAME;\nButtonGroup.className = CLASSNAME;\nButtonGroup.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","ButtonGroup","forwardRef","props","ref","children","className","forwardedProps","_jsx","classNames","displayName","defaultProps"],"mappings":";;;;;;;AAgBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,aAAa,CAAA;;AAEpC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAwC,GAAG,EAAE,CAAA;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,WAAW,GAAGC,UAAU,CAAmC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AAExD,EAAA,oBACIK,GAAA,CAAA,KAAA,EAAA;AAAKJ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKG,cAAc;AAAED,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAER,SAAS,CAAE;AAAAO,IAAAA,QAAA,EAC1EA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAEd,CAAC,EAAC;AACFJ,WAAW,CAACS,WAAW,GAAGb,cAAc,CAAA;AACxCI,WAAW,CAACK,SAAS,GAAGR,SAAS,CAAA;AACjCG,WAAW,CAACU,YAAY,GAAGX,aAAa;;;;"}
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { mdiCheck } from '@lumx/icons/esm/check';
|
|
4
|
+
import { mdiMinus } from '@lumx/icons/esm/minus';
|
|
5
|
+
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
6
|
+
import { u as useId } from '../useId-3a1facc0.js';
|
|
7
|
+
import { u as useMergeRefs } from '../mergeRefs-f0d7d6ea.js';
|
|
8
|
+
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
9
|
+
import { f as forwardRef } from '../forwardRef-8bce732e.js';
|
|
10
|
+
import { u as useDisableStateProps } from '../useDisableStateProps-69e16b7c.js';
|
|
11
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
12
|
+
import { InputLabel } from './input-label-30d199c3.js';
|
|
13
|
+
import { InputHelper } from './input-helper-2e4e49fd.js';
|
|
14
|
+
import { Theme } from '@lumx/core/js/constants';
|
|
15
|
+
import { Icon } from './icon-ee15673b.js';
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Intermediate state of checkbox.
|
|
19
|
+
*/
|
|
20
|
+
const INTERMEDIATE_STATE = 'intermediate';
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Defines the props of the component.
|
|
24
|
+
*/
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Component display name.
|
|
28
|
+
*/
|
|
29
|
+
const COMPONENT_NAME = 'Checkbox';
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Component default class name and class prefix.
|
|
33
|
+
*/
|
|
34
|
+
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Component default props.
|
|
38
|
+
*/
|
|
39
|
+
const DEFAULT_PROPS = {};
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Checkbox component.
|
|
43
|
+
*
|
|
44
|
+
* @param props Component props.
|
|
45
|
+
* @param ref Component ref.
|
|
46
|
+
* @return React element.
|
|
47
|
+
*/
|
|
48
|
+
const Checkbox = forwardRef((props, ref) => {
|
|
49
|
+
const {
|
|
50
|
+
isAnyDisabled,
|
|
51
|
+
disabledStateProps,
|
|
52
|
+
otherProps
|
|
53
|
+
} = useDisableStateProps(props);
|
|
54
|
+
const defaultTheme = useTheme() || Theme.light;
|
|
55
|
+
const {
|
|
56
|
+
checked,
|
|
57
|
+
className,
|
|
58
|
+
helper,
|
|
59
|
+
id,
|
|
60
|
+
inputRef,
|
|
61
|
+
isChecked = checked,
|
|
62
|
+
label,
|
|
63
|
+
name,
|
|
64
|
+
onChange,
|
|
65
|
+
theme = defaultTheme,
|
|
66
|
+
value,
|
|
67
|
+
inputProps = {},
|
|
68
|
+
...forwardedProps
|
|
69
|
+
} = otherProps;
|
|
70
|
+
const localInputRef = React__default.useRef(null);
|
|
71
|
+
const generatedInputId = useId();
|
|
72
|
+
const inputId = id || generatedInputId;
|
|
73
|
+
const handleChange = event => {
|
|
74
|
+
if (onChange) {
|
|
75
|
+
onChange(!isChecked, value, name, event);
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
const intermediateState = isChecked === INTERMEDIATE_STATE;
|
|
79
|
+
React__default.useEffect(() => {
|
|
80
|
+
const input = localInputRef.current;
|
|
81
|
+
if (input) input.indeterminate = intermediateState;
|
|
82
|
+
}, [intermediateState]);
|
|
83
|
+
return /*#__PURE__*/jsxs("div", {
|
|
84
|
+
ref: ref,
|
|
85
|
+
...forwardedProps,
|
|
86
|
+
className: classNames(className, handleBasicClasses({
|
|
87
|
+
// Whether state is intermediate class name will "-checked"
|
|
88
|
+
isChecked: intermediateState ? true : isChecked,
|
|
89
|
+
isDisabled: isAnyDisabled,
|
|
90
|
+
isUnchecked: !isChecked,
|
|
91
|
+
prefix: CLASSNAME,
|
|
92
|
+
theme
|
|
93
|
+
})),
|
|
94
|
+
children: [/*#__PURE__*/jsxs("div", {
|
|
95
|
+
className: `${CLASSNAME}__input-wrapper`,
|
|
96
|
+
children: [/*#__PURE__*/jsx("input", {
|
|
97
|
+
ref: useMergeRefs(inputRef, localInputRef),
|
|
98
|
+
type: "checkbox",
|
|
99
|
+
id: inputId,
|
|
100
|
+
className: `${CLASSNAME}__input-native`,
|
|
101
|
+
...disabledStateProps,
|
|
102
|
+
name: name,
|
|
103
|
+
value: value,
|
|
104
|
+
checked: isChecked,
|
|
105
|
+
onChange: handleChange,
|
|
106
|
+
"aria-describedby": helper ? `${inputId}-helper` : undefined,
|
|
107
|
+
"aria-checked": intermediateState ? 'mixed' : Boolean(isChecked),
|
|
108
|
+
readOnly: inputProps.readOnly || disabledStateProps['aria-disabled'],
|
|
109
|
+
...inputProps
|
|
110
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
111
|
+
className: `${CLASSNAME}__input-placeholder`,
|
|
112
|
+
children: [/*#__PURE__*/jsx("div", {
|
|
113
|
+
className: `${CLASSNAME}__input-background`
|
|
114
|
+
}), /*#__PURE__*/jsx("div", {
|
|
115
|
+
className: `${CLASSNAME}__input-indicator`,
|
|
116
|
+
children: /*#__PURE__*/jsx(Icon, {
|
|
117
|
+
icon: intermediateState ? mdiMinus : mdiCheck
|
|
118
|
+
})
|
|
119
|
+
})]
|
|
120
|
+
})]
|
|
121
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
122
|
+
className: `${CLASSNAME}__content`,
|
|
123
|
+
children: [label && /*#__PURE__*/jsx(InputLabel, {
|
|
124
|
+
htmlFor: inputId,
|
|
125
|
+
className: `${CLASSNAME}__label`,
|
|
126
|
+
theme: theme,
|
|
127
|
+
children: label
|
|
128
|
+
}), helper && /*#__PURE__*/jsx(InputHelper, {
|
|
129
|
+
id: `${inputId}-helper`,
|
|
130
|
+
className: `${CLASSNAME}__helper`,
|
|
131
|
+
theme: theme,
|
|
132
|
+
children: helper
|
|
133
|
+
})]
|
|
134
|
+
})]
|
|
135
|
+
});
|
|
136
|
+
});
|
|
137
|
+
Checkbox.displayName = COMPONENT_NAME;
|
|
138
|
+
Checkbox.className = CLASSNAME;
|
|
139
|
+
Checkbox.defaultProps = DEFAULT_PROPS;
|
|
140
|
+
|
|
141
|
+
export { Checkbox };
|
|
142
|
+
//# sourceMappingURL=checkbox-8ab51ef9.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-8ab51ef9.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiCheck } from '@lumx/icons/esm/check';\nimport { mdiMinus } from '@lumx/icons/esm/minus';\n\nimport { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\n\n/**\n * Intermediate state of checkbox.\n */\nconst INTERMEDIATE_STATE = 'intermediate';\n\n/**\n * Defines the props of the component.\n */\nexport interface CheckboxProps extends GenericProps, HasTheme, HasAriaDisabled {\n /** Helper text. */\n helper?: string;\n /** Native input id property. */\n id?: string;\n /** Native input ref. */\n inputRef?: React.Ref<HTMLInputElement>;\n /** Whether it is checked or not or intermediate. */\n isChecked?: boolean | 'intermediate';\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Label text. */\n label?: ReactNode;\n /** Native input name property. */\n name?: string;\n /** Native input value property. */\n value?: string;\n /** optional props for input */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /** On change callback. */\n onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Checkbox';\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<CheckboxProps> = {};\n\n/**\n * Checkbox component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Checkbox = forwardRef<CheckboxProps, HTMLDivElement>((props, ref) => {\n const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);\n const defaultTheme = useTheme() || Theme.light;\n const {\n checked,\n className,\n helper,\n id,\n inputRef,\n isChecked = checked,\n label,\n name,\n onChange,\n theme = defaultTheme,\n value,\n inputProps = {},\n ...forwardedProps\n } = otherProps;\n const localInputRef = React.useRef<HTMLInputElement>(null);\n const generatedInputId = useId();\n const inputId = id || generatedInputId;\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(!isChecked, value, name, event);\n }\n };\n\n const intermediateState = isChecked === INTERMEDIATE_STATE;\n\n React.useEffect(() => {\n const input = localInputRef.current;\n if (input) input.indeterminate = intermediateState;\n }, [intermediateState]);\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n // Whether state is intermediate class name will \"-checked\"\n isChecked: intermediateState ? true : isChecked,\n isDisabled: isAnyDisabled,\n isUnchecked: !isChecked,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n <div className={`${CLASSNAME}__input-wrapper`}>\n <input\n ref={useMergeRefs(inputRef, localInputRef)}\n type=\"checkbox\"\n id={inputId}\n className={`${CLASSNAME}__input-native`}\n {...disabledStateProps}\n name={name}\n value={value}\n checked={isChecked}\n onChange={handleChange}\n aria-describedby={helper ? `${inputId}-helper` : undefined}\n aria-checked={intermediateState ? 'mixed' : Boolean(isChecked)}\n readOnly={inputProps.readOnly || disabledStateProps['aria-disabled']}\n {...inputProps}\n />\n\n <div className={`${CLASSNAME}__input-placeholder`}>\n <div className={`${CLASSNAME}__input-background`} />\n\n <div className={`${CLASSNAME}__input-indicator`}>\n <Icon icon={intermediateState ? mdiMinus : mdiCheck} />\n </div>\n </div>\n </div>\n\n <div className={`${CLASSNAME}__content`}>\n {label && (\n <InputLabel htmlFor={inputId} className={`${CLASSNAME}__label`} theme={theme}>\n {label}\n </InputLabel>\n )}\n {helper && (\n <InputHelper id={`${inputId}-helper`} className={`${CLASSNAME}__helper`} theme={theme}>\n {helper}\n </InputHelper>\n )}\n </div>\n </div>\n );\n});\nCheckbox.displayName = COMPONENT_NAME;\nCheckbox.className = CLASSNAME;\nCheckbox.defaultProps = DEFAULT_PROPS;\n"],"names":["INTERMEDIATE_STATE","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Checkbox","forwardRef","props","ref","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","checked","className","helper","id","inputRef","isChecked","label","name","onChange","theme","value","inputProps","forwardedProps","localInputRef","React","useRef","generatedInputId","useId","inputId","handleChange","event","intermediateState","useEffect","input","current","indeterminate","_jsxs","classNames","handleBasicClasses","isDisabled","isUnchecked","prefix","children","_jsx","useMergeRefs","type","undefined","Boolean","readOnly","Icon","icon","mdiMinus","mdiCheck","InputLabel","htmlFor","InputHelper","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
export { C as Chip } from '../Chip-70af04b4.js';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { getRootClassName } from '@lumx/core/js/utils/className';
|
|
4
|
+
import { f as forwardRef } from '../forwardRef-8bce732e.js';
|
|
5
|
+
import { useState } from 'react';
|
|
6
|
+
import { jsx } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
const INITIAL_STATE_ACTIVE_CHIP = -1;
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Hook that provides the necessary information to manage chips navigation.
|
|
12
|
+
* @param chips List of chips selected.
|
|
13
|
+
* @param onChipDeleted Callback executed when a chip must be eliminated.
|
|
14
|
+
* @param initialActiveChip Initial active chip index.
|
|
15
|
+
*
|
|
16
|
+
* @return chip navigation tools.
|
|
17
|
+
*/
|
|
18
|
+
const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIAL_STATE_ACTIVE_CHIP) => {
|
|
19
|
+
const [wasBackspacePressed, setWasBackspacePressed] = useState(false);
|
|
20
|
+
const [activeChip, setActiveChip] = useState(initialActiveChip);
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Resets the active index and backspace control to their initial state
|
|
24
|
+
*/
|
|
25
|
+
const resetChipNavigation = () => {
|
|
26
|
+
setWasBackspacePressed(false);
|
|
27
|
+
setActiveChip(initialActiveChip);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Callback to be executed when the backspace was pressed. If there are no chips
|
|
32
|
+
* selected, it will return immediately. If there are it will check if the
|
|
33
|
+
* backspace was already pressed. if it was, it means that the user wants to eliminate
|
|
34
|
+
* the chip, so we execute the `onChipDeleted` function and reset internal state.
|
|
35
|
+
*
|
|
36
|
+
* If it was not pressed before, we set the `wasBackspacePressed` flag to true and
|
|
37
|
+
* highlight the last chip.
|
|
38
|
+
*/
|
|
39
|
+
const onBackspacePressed = () => {
|
|
40
|
+
if (chips.length === 0) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
if (wasBackspacePressed) {
|
|
44
|
+
const chipDeleted = chips[chips.length - 1];
|
|
45
|
+
onChipDeleted(chipDeleted);
|
|
46
|
+
resetChipNavigation();
|
|
47
|
+
} else {
|
|
48
|
+
setActiveChip(chips.length - 1);
|
|
49
|
+
setWasBackspacePressed(true);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
return {
|
|
53
|
+
activeChip,
|
|
54
|
+
onBackspacePressed,
|
|
55
|
+
resetChipNavigation
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Component default props.
|
|
61
|
+
*/
|
|
62
|
+
const DEFAULT_PROPS = {};
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* Component display name.
|
|
66
|
+
*/
|
|
67
|
+
const COMPONENT_NAME = 'ChipGroup';
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Component default class name and class prefix.
|
|
71
|
+
*/
|
|
72
|
+
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* ChipGroup component.
|
|
76
|
+
*
|
|
77
|
+
* @param props Component props.
|
|
78
|
+
* @param ref Component ref.
|
|
79
|
+
* @return React element.
|
|
80
|
+
*/
|
|
81
|
+
const InternalChipGroup = forwardRef((props, ref) => {
|
|
82
|
+
const {
|
|
83
|
+
align,
|
|
84
|
+
children,
|
|
85
|
+
className,
|
|
86
|
+
...forwardedProps
|
|
87
|
+
} = props;
|
|
88
|
+
return /*#__PURE__*/jsx("div", {
|
|
89
|
+
ref: ref,
|
|
90
|
+
...forwardedProps,
|
|
91
|
+
className: classNames(className, CLASSNAME),
|
|
92
|
+
children: children
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
InternalChipGroup.displayName = COMPONENT_NAME;
|
|
96
|
+
InternalChipGroup.className = CLASSNAME;
|
|
97
|
+
InternalChipGroup.defaultProps = DEFAULT_PROPS;
|
|
98
|
+
const ChipGroup = Object.assign(InternalChipGroup, {
|
|
99
|
+
useChipGroupNavigation
|
|
100
|
+
});
|
|
101
|
+
|
|
102
|
+
export { ChipGroup };
|
|
103
|
+
//# sourceMappingURL=chip-19e40755.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chip-19e40755.js","sources":["../../../src/hooks/useChipGroupNavigation.tsx","../../../src/components/chip/ChipGroup.tsx"],"sourcesContent":["import { useState } from 'react';\n\ninterface UseChipGroupNavigation {\n /** the current active chip index */\n activeChip: number;\n\n /** callback to be executed when the backspace was pressed */\n onBackspacePressed(): void;\n\n /** function that allows to reset the navigation */\n resetChipNavigation(): void;\n}\n\nexport type useChipGroupNavigationType<C = any> = (\n chips: C[],\n onChipDeleted: (chip: C) => void,\n initialActiveChip?: number,\n) => UseChipGroupNavigation;\n\nconst INITIAL_STATE_ACTIVE_CHIP = -1;\n\n/**\n * Hook that provides the necessary information to manage chips navigation.\n * @param chips List of chips selected.\n * @param onChipDeleted Callback executed when a chip must be eliminated.\n * @param initialActiveChip Initial active chip index.\n *\n * @return chip navigation tools.\n */\nexport const useChipGroupNavigation: useChipGroupNavigationType = (\n chips,\n onChipDeleted,\n initialActiveChip = INITIAL_STATE_ACTIVE_CHIP,\n) => {\n const [wasBackspacePressed, setWasBackspacePressed] = useState(false);\n const [activeChip, setActiveChip] = useState(initialActiveChip);\n\n /**\n * Resets the active index and backspace control to their initial state\n */\n const resetChipNavigation = () => {\n setWasBackspacePressed(false);\n setActiveChip(initialActiveChip);\n };\n\n /**\n * Callback to be executed when the backspace was pressed. If there are no chips\n * selected, it will return immediately. If there are it will check if the\n * backspace was already pressed. if it was, it means that the user wants to eliminate\n * the chip, so we execute the `onChipDeleted` function and reset internal state.\n *\n * If it was not pressed before, we set the `wasBackspacePressed` flag to true and\n * highlight the last chip.\n */\n const onBackspacePressed = () => {\n if (chips.length === 0) {\n return;\n }\n\n if (wasBackspacePressed) {\n const chipDeleted: any = chips[chips.length - 1];\n onChipDeleted(chipDeleted);\n resetChipNavigation();\n } else {\n setActiveChip(chips.length - 1);\n setWasBackspacePressed(true);\n }\n };\n\n return {\n activeChip,\n onBackspacePressed,\n resetChipNavigation,\n };\n};\n","import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { HorizontalAlignment } from '@lumx/core/js/constants';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';\n\n/**\n * Defines the props of the component.\n */\nexport interface ChipGroupProps extends GenericProps {\n /**\n * Chip horizontal alignment.\n * @deprecated\n */\n align?: HorizontalAlignment;\n /** List of Chip. */\n children: ReactNode;\n}\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<ChipGroupProps> = {};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ChipGroup';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * ChipGroup component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nconst InternalChipGroup = forwardRef<ChipGroupProps, HTMLDivElement>((props, ref) => {\n const { align, children, className, ...forwardedProps } = props;\n\n return (\n <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n {children}\n </div>\n );\n});\nInternalChipGroup.displayName = COMPONENT_NAME;\nInternalChipGroup.className = CLASSNAME;\nInternalChipGroup.defaultProps = DEFAULT_PROPS;\n\nexport const ChipGroup = Object.assign(InternalChipGroup, { useChipGroupNavigation });\n"],"names":["INITIAL_STATE_ACTIVE_CHIP","useChipGroupNavigation","chips","onChipDeleted","initialActiveChip","wasBackspacePressed","setWasBackspacePressed","useState","activeChip","setActiveChip","resetChipNavigation","onBackspacePressed","length","chipDeleted","DEFAULT_PROPS","COMPONENT_NAME","CLASSNAME","getRootClassName","InternalChipGroup","forwardRef","props","ref","align","children","className","forwardedProps","_jsx","classNames","displayName","defaultProps","ChipGroup","Object","assign"],"mappings":";;;;;;;AAmBA,MAAMA,yBAAyB,GAAG,CAAC,CAAC,CAAA;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,sBAAkD,GAAGA,CAC9DC,KAAK,EACLC,aAAa,EACbC,iBAAiB,GAAGJ,yBAAyB,KAC5C;EACD,MAAM,CAACK,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EACrE,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGF,QAAQ,CAACH,iBAAiB,CAAC,CAAA;;AAE/D;AACJ;AACA;EACI,MAAMM,mBAAmB,GAAGA,MAAM;IAC9BJ,sBAAsB,CAAC,KAAK,CAAC,CAAA;IAC7BG,aAAa,CAACL,iBAAiB,CAAC,CAAA;GACnC,CAAA;;AAED;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACI,MAAMO,kBAAkB,GAAGA,MAAM;AAC7B,IAAA,IAAIT,KAAK,CAACU,MAAM,KAAK,CAAC,EAAE;AACpB,MAAA,OAAA;AACJ,KAAA;AAEA,IAAA,IAAIP,mBAAmB,EAAE;MACrB,MAAMQ,WAAgB,GAAGX,KAAK,CAACA,KAAK,CAACU,MAAM,GAAG,CAAC,CAAC,CAAA;MAChDT,aAAa,CAACU,WAAW,CAAC,CAAA;AAC1BH,MAAAA,mBAAmB,EAAE,CAAA;AACzB,KAAC,MAAM;AACHD,MAAAA,aAAa,CAACP,KAAK,CAACU,MAAM,GAAG,CAAC,CAAC,CAAA;MAC/BN,sBAAsB,CAAC,IAAI,CAAC,CAAA;AAChC,KAAA;GACH,CAAA;EAED,OAAO;IACHE,UAAU;IACVG,kBAAkB;AAClBD,IAAAA,mBAAAA;GACH,CAAA;AACL,CAAC;;AClDD;AACA;AACA;AACA,MAAMI,aAAsC,GAAG,EAAE,CAAA;;AAEjD;AACA;AACA;AACA,MAAMC,cAAc,GAAG,WAAW,CAAA;;AAElC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMG,iBAAiB,GAAGC,UAAU,CAAiC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACjF,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGL,KAAK,CAAA;AAE/D,EAAA,oBACIM,GAAA,CAAA,KAAA,EAAA;AAAKL,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKI,cAAc;AAAED,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAER,SAAS,CAAE;AAAAO,IAAAA,QAAA,EAC1EA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAEd,CAAC,CAAC,CAAA;AACFL,iBAAiB,CAACU,WAAW,GAAGb,cAAc,CAAA;AAC9CG,iBAAiB,CAACM,SAAS,GAAGR,SAAS,CAAA;AACvCE,iBAAiB,CAACW,YAAY,GAAGf,aAAa,CAAA;AAEvC,MAAMgB,SAAS,GAAGC,MAAM,CAACC,MAAM,CAACd,iBAAiB,EAAE;AAAEjB,EAAAA,sBAAAA;AAAuB,CAAC;;;;"}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { Children } from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
4
|
+
import { f as forwardRef } from '../forwardRef-8bce732e.js';
|
|
5
|
+
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
6
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
7
|
+
import { Avatar } from './avatar-ed9f4869.js';
|
|
8
|
+
import { Theme, Size } from '@lumx/core/js/constants';
|
|
9
|
+
import { Tooltip } from './tooltip-dcb43bbe.js';
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Comment block variants.
|
|
13
|
+
*/
|
|
14
|
+
const CommentBlockVariant = {
|
|
15
|
+
indented: 'indented',
|
|
16
|
+
linear: 'linear'
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Defines the props of the component.
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Component display name.
|
|
25
|
+
*/
|
|
26
|
+
const COMPONENT_NAME = 'CommentBlock';
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Component default class name and class prefix.
|
|
30
|
+
*/
|
|
31
|
+
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Component default props.
|
|
35
|
+
*/
|
|
36
|
+
const DEFAULT_PROPS = {
|
|
37
|
+
variant: CommentBlockVariant.indented
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* CommentBlock component.
|
|
42
|
+
*
|
|
43
|
+
* @param props Component props.
|
|
44
|
+
* @param ref Component ref.
|
|
45
|
+
* @return React element.
|
|
46
|
+
*/
|
|
47
|
+
const CommentBlock = forwardRef((props, ref) => {
|
|
48
|
+
const defaultTheme = useTheme() || Theme.light;
|
|
49
|
+
const {
|
|
50
|
+
actions,
|
|
51
|
+
avatarProps,
|
|
52
|
+
children,
|
|
53
|
+
className,
|
|
54
|
+
date,
|
|
55
|
+
fullDate,
|
|
56
|
+
hasActions,
|
|
57
|
+
headerActions,
|
|
58
|
+
isOpen,
|
|
59
|
+
isRelevant,
|
|
60
|
+
name,
|
|
61
|
+
onClick,
|
|
62
|
+
onMouseEnter,
|
|
63
|
+
onMouseLeave,
|
|
64
|
+
text,
|
|
65
|
+
theme = defaultTheme,
|
|
66
|
+
variant = DEFAULT_PROPS.variant,
|
|
67
|
+
...forwardedProps
|
|
68
|
+
} = props;
|
|
69
|
+
const hasChildren = Children.count(children) > 0;
|
|
70
|
+
return /*#__PURE__*/jsxs("div", {
|
|
71
|
+
ref: ref,
|
|
72
|
+
className: classNames(className, handleBasicClasses({
|
|
73
|
+
hasChildren: hasChildren && isOpen,
|
|
74
|
+
hasIndentedChildren: hasChildren && variant === CommentBlockVariant.indented,
|
|
75
|
+
hasLinearChildren: hasChildren && variant === CommentBlockVariant.linear,
|
|
76
|
+
isRelevant,
|
|
77
|
+
prefix: CLASSNAME,
|
|
78
|
+
theme
|
|
79
|
+
})),
|
|
80
|
+
...forwardedProps,
|
|
81
|
+
children: [/*#__PURE__*/jsxs("div", {
|
|
82
|
+
className: `${CLASSNAME}__wrapper`,
|
|
83
|
+
children: [/*#__PURE__*/jsx("div", {
|
|
84
|
+
className: `${CLASSNAME}__avatar`,
|
|
85
|
+
children: /*#__PURE__*/jsx(Avatar, {
|
|
86
|
+
...avatarProps,
|
|
87
|
+
size: Size.m,
|
|
88
|
+
onClick: onClick
|
|
89
|
+
})
|
|
90
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
91
|
+
className: `${CLASSNAME}__container`,
|
|
92
|
+
children: [/*#__PURE__*/jsxs("div", {
|
|
93
|
+
className: `${CLASSNAME}__content`,
|
|
94
|
+
children: [/*#__PURE__*/jsxs("div", {
|
|
95
|
+
className: `${CLASSNAME}__meta`,
|
|
96
|
+
children: [name &&
|
|
97
|
+
/*#__PURE__*/
|
|
98
|
+
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
|
|
99
|
+
jsx("span", {
|
|
100
|
+
className: `${CLASSNAME}__name`,
|
|
101
|
+
onClick: onClick,
|
|
102
|
+
onMouseEnter: onMouseEnter,
|
|
103
|
+
onMouseLeave: onMouseLeave,
|
|
104
|
+
children: name
|
|
105
|
+
}), headerActions && /*#__PURE__*/jsx("span", {
|
|
106
|
+
className: `${CLASSNAME}__header-actions`,
|
|
107
|
+
children: headerActions
|
|
108
|
+
})]
|
|
109
|
+
}), /*#__PURE__*/jsx("div", {
|
|
110
|
+
className: `${CLASSNAME}__text`,
|
|
111
|
+
children: text
|
|
112
|
+
}), date && (fullDate ? /*#__PURE__*/jsx(Tooltip, {
|
|
113
|
+
label: fullDate,
|
|
114
|
+
placement: "top",
|
|
115
|
+
children: /*#__PURE__*/jsx("span", {
|
|
116
|
+
className: `${CLASSNAME}__date`,
|
|
117
|
+
children: date
|
|
118
|
+
})
|
|
119
|
+
}) : /*#__PURE__*/jsx("span", {
|
|
120
|
+
className: `${CLASSNAME}__date`,
|
|
121
|
+
children: date
|
|
122
|
+
}))]
|
|
123
|
+
}), hasActions && /*#__PURE__*/jsx("div", {
|
|
124
|
+
className: `${CLASSNAME}__actions`,
|
|
125
|
+
children: actions
|
|
126
|
+
})]
|
|
127
|
+
})]
|
|
128
|
+
}), hasChildren && isOpen && /*#__PURE__*/jsx("div", {
|
|
129
|
+
className: `${CLASSNAME}__children`,
|
|
130
|
+
children: children
|
|
131
|
+
})]
|
|
132
|
+
});
|
|
133
|
+
});
|
|
134
|
+
CommentBlock.displayName = COMPONENT_NAME;
|
|
135
|
+
CommentBlock.className = CLASSNAME;
|
|
136
|
+
CommentBlock.defaultProps = DEFAULT_PROPS;
|
|
137
|
+
|
|
138
|
+
export { CommentBlock, CommentBlockVariant };
|
|
139
|
+
//# sourceMappingURL=comment-block-bb6a0603.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"comment-block-bb6a0603.js","sources":["../../../src/components/comment-block/CommentBlock.tsx"],"sourcesContent":["import { Children, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Avatar, Size, Theme, Tooltip } from '@lumx/react';\nimport { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * Comment block variants.\n */\nexport const CommentBlockVariant = {\n indented: 'indented',\n linear: 'linear',\n} as const;\nexport type CommentBlockVariant = ValueOf<typeof CommentBlockVariant>;\n\n/**\n * Defines the props of the component.\n */\nexport interface CommentBlockProps extends GenericProps, HasTheme {\n /** Action toolbar content. */\n actions?: ReactNode;\n /** Props to pass to the avatar. */\n avatarProps: AvatarProps;\n /** Comment block replies. */\n children?: ReactNode;\n /** Comment date with the minimal timestamp information (xx minutes, x hours, yesterday, 6 days, Month Day, Month Day Year)*/\n date?: string;\n /** Comment date with the full timestamp information (day, month, year, time) */\n fullDate?: string;\n /** Whether the component has actions to display or not. */\n hasActions?: boolean;\n /** Action toolbar header content. */\n headerActions?: ReactNode;\n /** Whether the component is open or not. */\n isOpen?: boolean;\n /** Whether the comment is relevant or not. */\n isRelevant?: boolean;\n /** Comment author name. */\n name?: React.ReactNode;\n /**\n * On click callback.\n * @deprecated Use avatarProps instead and/or inject a clickable component in `name`\n */\n onClick?(): void;\n /**\n * On mouse enter callback.\n * @deprecated Use avatarProps instead and/or inject a clickable component in `name`\n */\n onMouseEnter?(): void;\n /**\n * On mouse leave callback.\n * @deprecated Use avatarProps instead and/or inject a clickable component in `name`\n */\n onMouseLeave?(): void;\n /** Comment content. */\n text: ReactNode | string;\n /** Comment variant. */\n variant?: CommentBlockVariant;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'CommentBlock';\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<CommentBlockProps> = {\n variant: CommentBlockVariant.indented,\n};\n\n/**\n * CommentBlock component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const CommentBlock = forwardRef<CommentBlockProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n actions,\n avatarProps,\n children,\n className,\n date,\n fullDate,\n hasActions,\n headerActions,\n isOpen,\n isRelevant,\n name,\n onClick,\n onMouseEnter,\n onMouseLeave,\n text,\n theme = defaultTheme,\n variant = DEFAULT_PROPS.variant,\n ...forwardedProps\n } = props;\n const hasChildren = Children.count(children) > 0;\n\n return (\n <div\n ref={ref}\n className={classNames(\n className,\n handleBasicClasses({\n hasChildren: hasChildren && isOpen,\n hasIndentedChildren: hasChildren && variant === CommentBlockVariant.indented,\n hasLinearChildren: hasChildren && variant === CommentBlockVariant.linear,\n isRelevant,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n {...forwardedProps}\n >\n <div className={`${CLASSNAME}__wrapper`}>\n <div className={`${CLASSNAME}__avatar`}>\n <Avatar {...avatarProps} size={Size.m} onClick={onClick} />\n </div>\n\n <div className={`${CLASSNAME}__container`}>\n <div className={`${CLASSNAME}__content`}>\n <div className={`${CLASSNAME}__meta`}>\n {name && (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <span\n className={`${CLASSNAME}__name`}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n >\n {name}\n </span>\n )}\n {headerActions && <span className={`${CLASSNAME}__header-actions`}>{headerActions}</span>}\n </div>\n\n <div className={`${CLASSNAME}__text`}>{text}</div>\n {date &&\n (fullDate ? (\n <Tooltip label={fullDate} placement=\"top\">\n <span className={`${CLASSNAME}__date`}>{date}</span>\n </Tooltip>\n ) : (\n <span className={`${CLASSNAME}__date`}>{date}</span>\n ))}\n </div>\n {hasActions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n </div>\n </div>\n {hasChildren && isOpen && <div className={`${CLASSNAME}__children`}>{children}</div>}\n </div>\n );\n});\nCommentBlock.displayName = COMPONENT_NAME;\nCommentBlock.className = CLASSNAME;\nCommentBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["CommentBlockVariant","indented","linear","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","variant","CommentBlock","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actions","avatarProps","children","className","date","fullDate","hasActions","headerActions","isOpen","isRelevant","name","onClick","onMouseEnter","onMouseLeave","text","theme","forwardedProps","hasChildren","Children","count","_jsxs","classNames","handleBasicClasses","hasIndentedChildren","hasLinearChildren","prefix","_jsx","Avatar","size","Size","m","Tooltip","label","placement","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-picker-e4209b01.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|