@shohojdhara/atomix 0.3.15 → 0.4.1
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/build-tools/index.d.ts +31 -30
- package/build-tools/package.json +4 -21
- package/dist/atomix.css +20234 -2027
- package/dist/atomix.css.map +1 -1
- package/dist/atomix.min.css +76 -2
- package/dist/atomix.min.css.map +1 -1
- package/dist/build-tools/index.d.ts +31 -30
- package/dist/build-tools/package.json +4 -21
- package/dist/charts.js +4 -5
- package/dist/charts.js.map +1 -1
- package/dist/core.d.ts +87 -10
- package/dist/core.js +673 -480
- package/dist/core.js.map +1 -1
- package/dist/forms.d.ts +15 -3
- package/dist/forms.js +530 -97
- package/dist/forms.js.map +1 -1
- package/dist/heavy.js +5 -6
- package/dist/heavy.js.map +1 -1
- package/dist/index.d.ts +644 -277
- package/dist/index.esm.js +1948 -1347
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +3333 -2728
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/layout.js.map +1 -1
- package/dist/theme.d.ts +9 -9
- package/dist/theme.js.map +1 -1
- package/package.json +2 -2
- package/scripts/atomix-cli.js +10 -1
- package/scripts/cli/__tests__/utils.test.js +6 -2
- package/scripts/cli/migration-tools.js +2 -2
- package/scripts/cli/theme-bridge.js +7 -9
- package/scripts/cli/utils.js +2 -1
- package/src/components/Accordion/Accordion.stories.tsx +72 -23
- package/src/components/Accordion/Accordion.test.tsx +70 -50
- package/src/components/Accordion/Accordion.tsx +219 -96
- package/src/components/Accordion/AccordionCompound.test.tsx +70 -0
- package/src/components/AtomixGlass/AtomixGlass.test.tsx +1 -1
- package/src/components/AtomixGlass/GlassFilter.tsx +9 -16
- package/src/components/AtomixGlass/glass-utils.ts +4 -3
- package/src/components/AtomixGlass/shader-utils.ts +128 -52
- package/src/components/AtomixGlass/stories/Playground.stories.tsx +1 -1
- package/src/components/AtomixGlass/stories/Shaders.stories.tsx +1 -1
- package/src/components/Avatar/Avatar.stories.tsx +45 -62
- package/src/components/Avatar/Avatar.tsx +58 -56
- package/src/components/Badge/Badge.stories.tsx +20 -9
- package/src/components/Badge/Badge.test.tsx +41 -41
- package/src/components/Badge/Badge.tsx +64 -62
- package/src/components/Block/Block.stories.tsx +14 -4
- package/src/components/Breadcrumb/Breadcrumb.stories.tsx +9 -8
- package/src/components/Breadcrumb/Breadcrumb.tsx +173 -65
- package/src/components/Breadcrumb/BreadcrumbCompound.test.tsx +84 -0
- package/src/components/Button/Button.stories.tsx +13 -22
- package/src/components/Button/Button.test.tsx +97 -81
- package/src/components/Button/Button.tsx +46 -14
- package/src/components/Button/ButtonGroup.stories.tsx +37 -32
- package/src/components/Button/ButtonGroup.tsx +4 -15
- package/src/components/Callout/Callout.stories.tsx +166 -918
- package/src/components/Callout/Callout.tsx +196 -84
- package/src/components/Callout/CalloutCompound.test.tsx +72 -0
- package/src/components/Card/Card.stories.tsx +67 -36
- package/src/components/Card/Card.tsx +30 -14
- package/src/components/Chart/AreaChart.tsx +1 -1
- package/src/components/Chart/CandlestickChart.tsx +23 -16
- package/src/components/Chart/Chart.stories.tsx +4 -9
- package/src/components/Chart/Chart.tsx +40 -44
- package/src/components/Chart/ChartRenderer.tsx +39 -12
- package/src/components/Chart/ChartToolbar.tsx +21 -5
- package/src/components/Chart/DonutChart.tsx +1 -1
- package/src/components/Chart/FunnelChart.tsx +4 -1
- package/src/components/Chart/GaugeChart.tsx +3 -1
- package/src/components/Chart/HeatmapChart.tsx +50 -37
- package/src/components/Chart/LineChart.tsx +3 -2
- package/src/components/Chart/MultiAxisChart.tsx +24 -16
- package/src/components/Chart/RadarChart.tsx +19 -17
- package/src/components/Chart/ScatterChart.tsx +29 -21
- package/src/components/ColorModeToggle/ColorModeToggle.stories.tsx +6 -2
- package/src/components/ColorModeToggle/ColorModeToggle.tsx +15 -3
- package/src/components/Countdown/Countdown.stories.tsx +7 -7
- package/src/components/DataTable/DataTable.stories.tsx +43 -38
- package/src/components/DataTable/DataTable.test.tsx +26 -148
- package/src/components/DataTable/DataTable.tsx +485 -456
- package/src/components/DatePicker/DatePicker.stories.tsx +32 -47
- package/src/components/DatePicker/DatePicker.tsx +31 -26
- package/src/components/Dropdown/Dropdown.stories.tsx +2 -5
- package/src/components/Dropdown/Dropdown.tsx +425 -298
- package/src/components/Dropdown/DropdownCompound.test.tsx +64 -0
- package/src/components/EdgePanel/EdgePanel.stories.tsx +6 -19
- package/src/components/EdgePanel/EdgePanel.tsx +163 -113
- package/src/components/EdgePanel/EdgePanelCompound.test.tsx +53 -0
- package/src/components/Footer/Footer.stories.tsx +21 -16
- package/src/components/Footer/Footer.tsx +130 -128
- package/src/components/Footer/FooterLink.tsx +2 -2
- package/src/components/Form/Checkbox.test.tsx +49 -49
- package/src/components/Form/Checkbox.tsx +108 -100
- package/src/components/Form/Form.stories.tsx +2 -10
- package/src/components/Form/Input.stories.tsx +22 -39
- package/src/components/Form/Input.test.tsx +38 -44
- package/src/components/Form/Radio.stories.tsx +6 -12
- package/src/components/Form/Radio.tsx +68 -66
- package/src/components/Form/Select.stories.tsx +23 -0
- package/src/components/Form/Select.test.tsx +99 -0
- package/src/components/Form/Select.tsx +239 -186
- package/src/components/Form/SelectOption.tsx +88 -0
- package/src/components/Form/Textarea.test.tsx +27 -32
- package/src/components/Hero/Hero.stories.tsx +93 -23
- package/src/components/Hero/Hero.test.tsx +142 -0
- package/src/components/Hero/Hero.tsx +343 -58
- package/src/components/Icon/index.ts +7 -1
- package/src/components/List/List.test.tsx +62 -0
- package/src/components/List/List.tsx +32 -25
- package/src/components/List/ListItem.tsx +20 -0
- package/src/components/Modal/Modal.stories.tsx +67 -2
- package/src/components/Modal/Modal.tsx +208 -125
- package/src/components/Modal/ModalCompound.test.tsx +94 -0
- package/src/components/Navigation/Menu/MegaMenu.tsx +70 -70
- package/src/components/Navigation/Nav/NavDropdown.tsx +1 -5
- package/src/components/Navigation/SideMenu/SideMenu.stories.tsx +128 -28
- package/src/components/Navigation/SideMenu/SideMenu.tsx +5 -7
- package/src/components/Navigation/SideMenu/SideMenuItem.tsx +4 -5
- package/src/components/Pagination/Pagination.stories.tsx +7 -4
- package/src/components/Pagination/Pagination.tsx +199 -202
- package/src/components/PhotoViewer/PhotoViewer.tsx +4 -1
- package/src/components/Popover/Popover.stories.tsx +99 -192
- package/src/components/Popover/Popover.tsx +41 -37
- package/src/components/Progress/Progress.stories.tsx +35 -44
- package/src/components/River/River.stories.tsx +2 -1
- package/src/components/SectionIntro/SectionIntro.stories.tsx +71 -71
- package/src/components/Slider/Slider.stories.tsx +12 -4
- package/src/components/Spinner/Spinner.stories.tsx +3 -1
- package/src/components/Spinner/Spinner.test.tsx +23 -23
- package/src/components/Spinner/Spinner.tsx +43 -46
- package/src/components/Steps/Steps.stories.tsx +8 -6
- package/src/components/Steps/Steps.tsx +124 -21
- package/src/components/Steps/StepsCompound.test.tsx +81 -0
- package/src/components/Tabs/Tabs.stories.tsx +12 -9
- package/src/components/Tabs/Tabs.tsx +230 -75
- package/src/components/Tabs/TabsCompound.test.tsx +64 -0
- package/src/components/Toggle/Toggle.stories.tsx +27 -13
- package/src/components/Toggle/Toggle.test.tsx +65 -70
- package/src/components/Toggle/Toggle.tsx +4 -1
- package/src/components/Tooltip/Tooltip.stories.tsx +24 -20
- package/src/components/Tooltip/Tooltip.tsx +104 -106
- package/src/components/Upload/Upload.stories.tsx +129 -127
- package/src/components/Upload/Upload.tsx +287 -283
- package/src/components/VideoPlayer/VideoPlayer.tsx +6 -1
- package/src/components/index.ts +13 -2
- package/src/layouts/Grid/Grid.stories.tsx +9 -3
- package/src/layouts/MasonryGrid/MasonryGrid.tsx +5 -1
- package/src/lib/__tests__/theme-tools.test.ts +32 -6
- package/src/lib/composables/index.ts +0 -4
- package/src/lib/composables/shared-mouse-tracker.ts +13 -14
- package/src/lib/composables/useAtomixGlass.ts +102 -60
- package/src/lib/composables/useChartExport.ts +1 -1
- package/src/lib/composables/useDataTable.ts +29 -17
- package/src/lib/composables/useHero.ts +58 -14
- package/src/lib/composables/useHeroBackgroundSlider.ts +2 -9
- package/src/lib/composables/useInput.ts +10 -8
- package/src/lib/composables/useSideMenu.ts +6 -5
- package/src/lib/composables/useTooltip.ts +1 -2
- package/src/lib/composables/useVideoPlayer.ts +44 -35
- package/src/lib/config/index.ts +154 -154
- package/src/lib/constants/cssVariables.ts +29 -29
- package/src/lib/hooks/__tests__/useComponentCustomization.test.ts +2 -6
- package/src/lib/hooks/index.ts +1 -1
- package/src/lib/hooks/useComponentCustomization.ts +11 -17
- package/src/lib/hooks/usePerformanceMonitor.ts +6 -7
- package/src/lib/patterns/__tests__/slots.test.ts +1 -1
- package/src/lib/patterns/index.ts +1 -1
- package/src/lib/patterns/slots.tsx +8 -13
- package/src/lib/storybook/InteractiveDemo.tsx +13 -18
- package/src/lib/storybook/PreviewContainer.tsx +1 -1
- package/src/lib/storybook/VariantsGrid.tsx +3 -7
- package/src/lib/storybook/index.ts +1 -1
- package/src/lib/theme/adapters/cssVariableMapper.ts +47 -74
- package/src/lib/theme/adapters/index.ts +3 -9
- package/src/lib/theme/adapters/themeAdapter.ts +41 -26
- package/src/lib/theme/config/index.ts +1 -1
- package/src/lib/theme/config/types.ts +2 -2
- package/src/lib/theme/config/validator.ts +10 -5
- package/src/lib/theme/constants/constants.ts +2 -2
- package/src/lib/theme/constants/index.ts +1 -2
- package/src/lib/theme/core/__tests__/createTheme.test.ts +20 -22
- package/src/lib/theme/core/composeTheme.ts +32 -26
- package/src/lib/theme/core/createTheme.ts +1 -1
- package/src/lib/theme/core/createThemeObject.ts +308 -301
- package/src/lib/theme/core/index.ts +3 -3
- package/src/lib/theme/devtools/CLI.ts +105 -111
- package/src/lib/theme/devtools/Comparator.tsx +50 -32
- package/src/lib/theme/devtools/DesignTokensCustomizer.stories.tsx +50 -48
- package/src/lib/theme/devtools/DesignTokensCustomizer.tsx +257 -63
- package/src/lib/theme/devtools/Inspector.tsx +75 -60
- package/src/lib/theme/devtools/LiveEditor.tsx +97 -76
- package/src/lib/theme/devtools/Preview.tsx +150 -106
- package/src/lib/theme/devtools/ThemeValidator.ts +29 -21
- package/src/lib/theme/devtools/index.ts +3 -9
- package/src/lib/theme/devtools/useHistory.ts +23 -21
- package/src/lib/theme/errors/errors.ts +12 -11
- package/src/lib/theme/errors/index.ts +2 -7
- package/src/lib/theme/generators/generateCSS.ts +9 -13
- package/src/lib/theme/generators/generateCSSNested.ts +1 -6
- package/src/lib/theme/generators/generateCSSVariables.ts +673 -630
- package/src/lib/theme/generators/index.ts +1 -4
- package/src/lib/theme/i18n/index.ts +1 -1
- package/src/lib/theme/i18n/rtl.ts +13 -13
- package/src/lib/theme/index.ts +7 -16
- package/src/lib/theme/runtime/ThemeApplicator.ts +4 -4
- package/src/lib/theme/runtime/ThemeContext.tsx +1 -1
- package/src/lib/theme/runtime/ThemeErrorBoundary.tsx +19 -23
- package/src/lib/theme/runtime/ThemeProvider.tsx +230 -239
- package/src/lib/theme/runtime/__tests__/ThemeProvider.integration.test.tsx +1 -1
- package/src/lib/theme/runtime/__tests__/ThemeProvider.test.tsx +24 -29
- package/src/lib/theme/runtime/index.ts +2 -5
- package/src/lib/theme/runtime/useTheme.ts +18 -18
- package/src/lib/theme/runtime/useThemeTokens.ts +22 -22
- package/src/lib/theme/test/testTheme.ts +15 -16
- package/src/lib/theme/tokens/index.ts +2 -7
- package/src/lib/theme/tokens/tokens.ts +25 -24
- package/src/lib/theme/types.ts +428 -411
- package/src/lib/theme/utils/__tests__/themeValidation.test.ts +3 -3
- package/src/lib/theme/utils/componentTheming.ts +18 -18
- package/src/lib/theme/utils/domUtils.ts +277 -289
- package/src/lib/theme/utils/index.ts +1 -2
- package/src/lib/theme/utils/injectCSS.ts +10 -14
- package/src/lib/theme/utils/naming.ts +20 -16
- package/src/lib/theme/utils/themeHelpers.ts +10 -12
- package/src/lib/theme/utils/themeUtils.ts +85 -86
- package/src/lib/theme/utils/themeValidation.ts +82 -33
- package/src/lib/theme-tools.ts +8 -6
- package/src/lib/types/components.ts +180 -73
- package/src/lib/types/partProps.ts +1 -1
- package/src/lib/utils/__tests__/componentUtils.test.ts +57 -2
- package/src/lib/utils/__tests__/csv.test.ts +1 -1
- package/src/lib/utils/__tests__/themeNaming.test.ts +117 -0
- package/src/lib/utils/componentUtils.ts +8 -12
- package/src/lib/utils/csv.ts +3 -1
- package/src/lib/utils/dataTableExport.ts +1 -5
- package/src/lib/utils/fontPreloader.ts +10 -19
- package/src/lib/utils/icons.ts +4 -1
- package/src/lib/utils/index.ts +2 -6
- package/src/lib/utils/memoryMonitor.ts +10 -8
- package/src/lib/utils/themeNaming.ts +3 -3
- package/src/styles/01-settings/_index.scss +0 -1
- package/src/styles/01-settings/_settings.colors.scss +8 -8
- package/src/styles/01-settings/_settings.design-tokens.scss +61 -50
- package/src/styles/01-settings/_settings.navbar.scss +1 -1
- package/src/styles/01-settings/_settings.spacing.scss +3 -4
- package/src/styles/01-settings/_settings.tooltip.scss +1 -1
- package/src/styles/01-settings/_settings.typography.scss +1 -1
- package/src/styles/02-tools/_tools.breakpoints.scss +1 -1
- package/src/styles/02-tools/_tools.button.scss +51 -21
- package/src/styles/02-tools/_tools.utility-api.scss +36 -24
- package/src/styles/03-generic/_generic.root.scss +4 -3
- package/src/styles/06-components/_components.atomix-glass.scss +13 -9
- package/src/styles/06-components/_components.button.scss +16 -4
- package/src/styles/06-components/_components.callout.scss +27 -21
- package/src/styles/06-components/_components.card.scss +5 -14
- package/src/styles/06-components/_components.chart.scss +22 -19
- package/src/styles/06-components/_components.checkbox.scss +3 -1
- package/src/styles/06-components/_components.color-mode-toggle.scss +3 -1
- package/src/styles/06-components/_components.edge-panel.scss +9 -2
- package/src/styles/06-components/_components.footer.scss +1 -1
- package/src/styles/06-components/_components.side-menu.scss +5 -5
- package/src/styles/06-components/_components.toggle.scss +18 -0
- package/src/styles/06-components/_index.scss +1 -1
- package/src/styles/06-components/old.chart.styles.scss +0 -2
- package/src/styles/99-utilities/_utilities.border.scss +69 -27
- package/src/styles/99-utilities/_utilities.display.scss +1 -1
- package/src/styles/99-utilities/_utilities.opacity.scss +10 -0
- package/src/styles/99-utilities/_utilities.position.scss +16 -9
- package/src/styles/99-utilities/_utilities.scss +1 -1
- package/src/styles/99-utilities/_utilities.sizes.scss +47 -18
- package/src/styles/99-utilities/_utilities.spacing.scss +118 -66
- package/src/styles/99-utilities/_utilities.text-gradient.scss +30 -30
- package/src/styles/99-utilities/_utilities.text.scss +67 -47
|
@@ -171,7 +171,12 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
|
|
|
171
171
|
const video = videoRef.current;
|
|
172
172
|
if (video) {
|
|
173
173
|
const tracks = video.textTracks;
|
|
174
|
-
console.log(
|
|
174
|
+
console.log(
|
|
175
|
+
'Setting subtitle:',
|
|
176
|
+
subtitleLang ? 'enabled' : 'disabled',
|
|
177
|
+
'Available tracks:',
|
|
178
|
+
tracks.length
|
|
179
|
+
);
|
|
175
180
|
|
|
176
181
|
// Hide all tracks first
|
|
177
182
|
for (let i = 0; i < tracks.length; i++) {
|
package/src/components/index.ts
CHANGED
|
@@ -110,9 +110,20 @@ export {
|
|
|
110
110
|
type SideMenuListProps,
|
|
111
111
|
} from './Navigation/SideMenu/SideMenuList';
|
|
112
112
|
// Menu components
|
|
113
|
-
export {
|
|
113
|
+
export {
|
|
114
|
+
Menu,
|
|
115
|
+
MenuItem,
|
|
116
|
+
MenuDivider,
|
|
117
|
+
type MenuProps,
|
|
118
|
+
type MenuItemProps,
|
|
119
|
+
type MenuDividerProps,
|
|
120
|
+
} from './Navigation/Menu/Menu';
|
|
114
121
|
export { MegaMenu, MegaMenuColumn, MegaMenuLink } from './Navigation/Menu/MegaMenu';
|
|
115
|
-
export type {
|
|
122
|
+
export type {
|
|
123
|
+
MegaMenuProps,
|
|
124
|
+
MegaMenuColumnProps,
|
|
125
|
+
MegaMenuLinkProps,
|
|
126
|
+
} from '../lib/types/components';
|
|
116
127
|
// Navigation sub-components
|
|
117
128
|
export { NavDropdown, type NavDropdownProps } from './Navigation/Nav/NavDropdown';
|
|
118
129
|
export { default as Pagination, type PaginationProps } from './Pagination/Pagination';
|
|
@@ -549,7 +549,9 @@ export const AlignmentAndSpacing: Story = {
|
|
|
549
549
|
</p>
|
|
550
550
|
|
|
551
551
|
<div className="u-mb-6">
|
|
552
|
-
<h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
|
|
552
|
+
<h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
|
|
553
|
+
justify-content="start"
|
|
554
|
+
</h3>
|
|
553
555
|
<Row justifyContent="start" className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
|
|
554
556
|
<GridCol xs={3}>
|
|
555
557
|
<DemoCard variant="secondary">Col 1</DemoCard>
|
|
@@ -561,7 +563,9 @@ export const AlignmentAndSpacing: Story = {
|
|
|
561
563
|
</div>
|
|
562
564
|
|
|
563
565
|
<div className="u-mb-6">
|
|
564
|
-
<h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
|
|
566
|
+
<h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
|
|
567
|
+
justify-content="center"
|
|
568
|
+
</h3>
|
|
565
569
|
<Row justifyContent="center" className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
|
|
566
570
|
<GridCol xs={3}>
|
|
567
571
|
<DemoCard variant="secondary">Col 1</DemoCard>
|
|
@@ -587,7 +591,9 @@ export const AlignmentAndSpacing: Story = {
|
|
|
587
591
|
</div>
|
|
588
592
|
|
|
589
593
|
<div className="u-mb-6">
|
|
590
|
-
<h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
|
|
594
|
+
<h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
|
|
595
|
+
justify-content="around"
|
|
596
|
+
</h3>
|
|
591
597
|
<Row justifyContent="around" className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
|
|
592
598
|
<GridCol xs={3}>
|
|
593
599
|
<DemoCard variant="secondary">Col 1</DemoCard>
|
|
@@ -374,7 +374,11 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
|
|
|
374
374
|
const position = positions[index];
|
|
375
375
|
if (!position) {
|
|
376
376
|
return (
|
|
377
|
-
<div
|
|
377
|
+
<div
|
|
378
|
+
key={item.id}
|
|
379
|
+
ref={item.ref as React.LegacyRef<HTMLDivElement>}
|
|
380
|
+
style={{ opacity: 0, position: 'absolute' }}
|
|
381
|
+
>
|
|
378
382
|
{item.element}
|
|
379
383
|
</div>
|
|
380
384
|
);
|
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
validateTheme,
|
|
8
8
|
themeToCSS,
|
|
9
9
|
getThemeMetadata,
|
|
10
|
-
supportsDarkMode
|
|
10
|
+
supportsDarkMode,
|
|
11
11
|
} from '../theme-tools';
|
|
12
12
|
import { Theme } from '../theme/types';
|
|
13
13
|
|
|
@@ -59,13 +59,39 @@ describe('theme-tools', () => {
|
|
|
59
59
|
},
|
|
60
60
|
shadows: { xs: 'none', sm: 'none', md: 'none', lg: 'none', xl: 'none' },
|
|
61
61
|
transitions: {
|
|
62
|
-
duration: {
|
|
63
|
-
|
|
62
|
+
duration: {
|
|
63
|
+
shortest: 150,
|
|
64
|
+
shorter: 200,
|
|
65
|
+
short: 250,
|
|
66
|
+
standard: 300,
|
|
67
|
+
complex: 375,
|
|
68
|
+
enteringScreen: 225,
|
|
69
|
+
leavingScreen: 195,
|
|
70
|
+
},
|
|
71
|
+
easing: { easeInOut: 'ease', easeOut: 'ease', easeIn: 'ease', sharp: 'ease' },
|
|
72
|
+
},
|
|
73
|
+
zIndex: {
|
|
74
|
+
mobileStepper: 1000,
|
|
75
|
+
speedDial: 1050,
|
|
76
|
+
appBar: 1100,
|
|
77
|
+
drawer: 1200,
|
|
78
|
+
modal: 1300,
|
|
79
|
+
snackbar: 1400,
|
|
80
|
+
tooltip: 1500,
|
|
81
|
+
},
|
|
82
|
+
borderRadius: {
|
|
83
|
+
base: 4,
|
|
84
|
+
sm: 2,
|
|
85
|
+
md: 4,
|
|
86
|
+
lg: 8,
|
|
87
|
+
xl: 12,
|
|
88
|
+
xxl: 16,
|
|
89
|
+
'3xl': 24,
|
|
90
|
+
'4xl': 32,
|
|
91
|
+
pill: 9999,
|
|
64
92
|
},
|
|
65
|
-
zIndex: { mobileStepper: 1000, speedDial: 1050, appBar: 1100, drawer: 1200, modal: 1300, snackbar: 1400, tooltip: 1500 },
|
|
66
|
-
borderRadius: { base: 4, sm: 2, md: 4, lg: 8, xl: 12, xxl: 16, '3xl': 24, '4xl': 32, pill: 9999 },
|
|
67
93
|
custom: {},
|
|
68
|
-
__isJSTheme: true
|
|
94
|
+
__isJSTheme: true,
|
|
69
95
|
};
|
|
70
96
|
|
|
71
97
|
describe('quickTheme', () => {
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
// Button composables
|
|
2
|
-
// export * from './useButton';
|
|
3
|
-
|
|
4
1
|
// Accordion composables
|
|
5
2
|
export * from './useAccordion';
|
|
6
3
|
|
|
@@ -29,7 +26,6 @@ export * from './useEdgePanel';
|
|
|
29
26
|
export * from './useTodo';
|
|
30
27
|
|
|
31
28
|
// Form composables
|
|
32
|
-
// export * from './useCheckbox';
|
|
33
29
|
export * from './useForm';
|
|
34
30
|
export * from './useFormGroup';
|
|
35
31
|
|
|
@@ -19,15 +19,15 @@ class GlobalMouseTracker {
|
|
|
19
19
|
*/
|
|
20
20
|
subscribe(callback: (pos: MousePosition) => void): () => void {
|
|
21
21
|
this.listeners.add(callback);
|
|
22
|
-
|
|
22
|
+
|
|
23
23
|
// Start tracking if this is the first subscriber
|
|
24
24
|
if (this.listeners.size === 1) {
|
|
25
25
|
this.startTracking();
|
|
26
26
|
}
|
|
27
|
-
|
|
27
|
+
|
|
28
28
|
// Immediately notify with current position
|
|
29
29
|
callback(this.position);
|
|
30
|
-
|
|
30
|
+
|
|
31
31
|
// Return unsubscribe function
|
|
32
32
|
return () => {
|
|
33
33
|
this.unsubscribe(callback);
|
|
@@ -39,7 +39,7 @@ class GlobalMouseTracker {
|
|
|
39
39
|
*/
|
|
40
40
|
private unsubscribe(callback: (pos: MousePosition) => void): void {
|
|
41
41
|
this.listeners.delete(callback);
|
|
42
|
-
|
|
42
|
+
|
|
43
43
|
// Stop tracking if no more subscribers
|
|
44
44
|
if (this.listeners.size === 0) {
|
|
45
45
|
this.stopTracking();
|
|
@@ -53,9 +53,9 @@ class GlobalMouseTracker {
|
|
|
53
53
|
if (this.isTracking) {
|
|
54
54
|
return;
|
|
55
55
|
}
|
|
56
|
-
|
|
56
|
+
|
|
57
57
|
this.isTracking = true;
|
|
58
|
-
|
|
58
|
+
|
|
59
59
|
// Use document-level listener for global tracking
|
|
60
60
|
document.addEventListener('mousemove', this.handleMouseMove, { passive: true });
|
|
61
61
|
}
|
|
@@ -67,16 +67,16 @@ class GlobalMouseTracker {
|
|
|
67
67
|
if (!this.isTracking) {
|
|
68
68
|
return;
|
|
69
69
|
}
|
|
70
|
-
|
|
70
|
+
|
|
71
71
|
this.isTracking = false;
|
|
72
72
|
document.removeEventListener('mousemove', this.handleMouseMove);
|
|
73
|
-
|
|
73
|
+
|
|
74
74
|
// Cancel any pending RAF
|
|
75
75
|
if (this.rafId !== null) {
|
|
76
76
|
cancelAnimationFrame(this.rafId);
|
|
77
77
|
this.rafId = null;
|
|
78
78
|
}
|
|
79
|
-
|
|
79
|
+
|
|
80
80
|
this.lastEvent = null;
|
|
81
81
|
}
|
|
82
82
|
|
|
@@ -85,7 +85,7 @@ class GlobalMouseTracker {
|
|
|
85
85
|
*/
|
|
86
86
|
private handleMouseMove = (e: MouseEvent): void => {
|
|
87
87
|
this.lastEvent = e;
|
|
88
|
-
|
|
88
|
+
|
|
89
89
|
// Use requestAnimationFrame to throttle updates
|
|
90
90
|
if (this.rafId === null) {
|
|
91
91
|
this.rafId = requestAnimationFrame(() => {
|
|
@@ -94,9 +94,9 @@ class GlobalMouseTracker {
|
|
|
94
94
|
x: this.lastEvent.clientX,
|
|
95
95
|
y: this.lastEvent.clientY,
|
|
96
96
|
};
|
|
97
|
-
|
|
97
|
+
|
|
98
98
|
// Notify all subscribers
|
|
99
|
-
this.listeners.forEach(
|
|
99
|
+
this.listeners.forEach(callback => {
|
|
100
100
|
try {
|
|
101
101
|
callback(this.position);
|
|
102
102
|
} catch (error) {
|
|
@@ -104,7 +104,7 @@ class GlobalMouseTracker {
|
|
|
104
104
|
}
|
|
105
105
|
});
|
|
106
106
|
}
|
|
107
|
-
|
|
107
|
+
|
|
108
108
|
this.rafId = null;
|
|
109
109
|
});
|
|
110
110
|
}
|
|
@@ -130,4 +130,3 @@ const globalMouseTracker = new GlobalMouseTracker();
|
|
|
130
130
|
|
|
131
131
|
export { globalMouseTracker };
|
|
132
132
|
export type { GlobalMouseTracker };
|
|
133
|
-
|
|
@@ -1,10 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
useCallback,
|
|
3
|
-
useEffect,
|
|
4
|
-
useMemo,
|
|
5
|
-
useRef,
|
|
6
|
-
useState,
|
|
7
|
-
} from 'react';
|
|
1
|
+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
8
2
|
import type {
|
|
9
3
|
AtomixGlassProps,
|
|
10
4
|
DisplacementMode,
|
|
@@ -41,10 +35,7 @@ const backgroundDetectionCache = new WeakMap<HTMLElement, BackgroundDetectionCac
|
|
|
41
35
|
* Compare two OverLightConfig values for equality
|
|
42
36
|
* Handles primitives (boolean, 'auto') and objects with deep comparison
|
|
43
37
|
*/
|
|
44
|
-
const compareOverLightConfig = (
|
|
45
|
-
config1: OverLightConfig,
|
|
46
|
-
config2: OverLightConfig
|
|
47
|
-
): boolean => {
|
|
38
|
+
const compareOverLightConfig = (config1: OverLightConfig, config2: OverLightConfig): boolean => {
|
|
48
39
|
// Primitive comparison for boolean and 'auto'
|
|
49
40
|
if (typeof config1 !== 'object' || config1 === null) {
|
|
50
41
|
return config1 === config2;
|
|
@@ -210,7 +201,6 @@ export function useAtomixGlass({
|
|
|
210
201
|
onClick,
|
|
211
202
|
debugCornerRadius = false,
|
|
212
203
|
debugOverLight = false,
|
|
213
|
-
enablePerformanceMonitoring = false,
|
|
214
204
|
children,
|
|
215
205
|
}: UseAtomixGlassOptions): UseAtomixGlassReturn {
|
|
216
206
|
// State
|
|
@@ -294,7 +284,10 @@ export function useAtomixGlass({
|
|
|
294
284
|
setDynamicCornerRadius(extractedRadius);
|
|
295
285
|
}
|
|
296
286
|
} catch (error) {
|
|
297
|
-
if (
|
|
287
|
+
if (
|
|
288
|
+
(typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') &&
|
|
289
|
+
debugCornerRadius
|
|
290
|
+
) {
|
|
298
291
|
console.error('[AtomixGlass] Error extracting corner radius:', error);
|
|
299
292
|
}
|
|
300
293
|
}
|
|
@@ -308,7 +301,8 @@ export function useAtomixGlass({
|
|
|
308
301
|
// Media query handlers and background detection
|
|
309
302
|
useEffect(() => {
|
|
310
303
|
// Only run auto-detection for 'auto' mode or object config (which uses auto-detection)
|
|
311
|
-
const shouldDetect =
|
|
304
|
+
const shouldDetect =
|
|
305
|
+
overLight === 'auto' || (typeof overLight === 'object' && overLight !== null);
|
|
312
306
|
|
|
313
307
|
if (shouldDetect && glassRef.current) {
|
|
314
308
|
const element = glassRef.current;
|
|
@@ -357,7 +351,13 @@ export function useAtomixGlass({
|
|
|
357
351
|
const bgImage = computedStyle.backgroundImage;
|
|
358
352
|
|
|
359
353
|
// Check for solid color backgrounds
|
|
360
|
-
if (
|
|
354
|
+
if (
|
|
355
|
+
bgColor &&
|
|
356
|
+
bgColor !== 'rgba(0, 0, 0, 0)' &&
|
|
357
|
+
bgColor !== 'transparent' &&
|
|
358
|
+
bgColor !== 'initial' &&
|
|
359
|
+
bgColor !== 'none'
|
|
360
|
+
) {
|
|
361
361
|
const rgb = bgColor.match(/\d+/g);
|
|
362
362
|
if (rgb && rgb.length >= 3) {
|
|
363
363
|
const r = Number(rgb[0]);
|
|
@@ -365,9 +365,20 @@ export function useAtomixGlass({
|
|
|
365
365
|
const b = Number(rgb[2]);
|
|
366
366
|
|
|
367
367
|
// Validate RGB values are valid numbers
|
|
368
|
-
if (
|
|
369
|
-
|
|
370
|
-
|
|
368
|
+
if (
|
|
369
|
+
!isNaN(r) &&
|
|
370
|
+
!isNaN(g) &&
|
|
371
|
+
!isNaN(b) &&
|
|
372
|
+
isFinite(r) &&
|
|
373
|
+
isFinite(g) &&
|
|
374
|
+
isFinite(b) &&
|
|
375
|
+
r >= 0 &&
|
|
376
|
+
r <= 255 &&
|
|
377
|
+
g >= 0 &&
|
|
378
|
+
g <= 255 &&
|
|
379
|
+
b >= 0 &&
|
|
380
|
+
b <= 255
|
|
381
|
+
) {
|
|
371
382
|
// Only consider if it's not pure black or very dark
|
|
372
383
|
if (r > 10 || g > 10 || b > 10) {
|
|
373
384
|
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
|
@@ -414,11 +425,12 @@ export function useAtomixGlass({
|
|
|
414
425
|
if (typeof overLight === 'object' && overLight !== null) {
|
|
415
426
|
const objConfig = overLight as OverLightObjectConfig;
|
|
416
427
|
if (objConfig.threshold !== undefined) {
|
|
417
|
-
const configThreshold =
|
|
428
|
+
const configThreshold =
|
|
429
|
+
typeof objConfig.threshold === 'number' &&
|
|
418
430
|
!isNaN(objConfig.threshold) &&
|
|
419
431
|
isFinite(objConfig.threshold)
|
|
420
|
-
|
|
421
|
-
|
|
432
|
+
? objConfig.threshold
|
|
433
|
+
: 0.7;
|
|
422
434
|
threshold = Math.min(0.9, Math.max(0.1, configThreshold));
|
|
423
435
|
}
|
|
424
436
|
}
|
|
@@ -426,24 +438,31 @@ export function useAtomixGlass({
|
|
|
426
438
|
const isOverLightDetected = avgLuminance > threshold;
|
|
427
439
|
|
|
428
440
|
// Cache the result in shared cache
|
|
429
|
-
setCachedBackgroundDetection(
|
|
441
|
+
setCachedBackgroundDetection(
|
|
442
|
+
element.parentElement,
|
|
443
|
+
overLight,
|
|
444
|
+
isOverLightDetected,
|
|
445
|
+
threshold
|
|
446
|
+
);
|
|
430
447
|
|
|
431
448
|
setDetectedOverLight(isOverLightDetected);
|
|
432
449
|
} else {
|
|
433
450
|
// Invalid luminance calculation, default to false
|
|
434
451
|
const result = false;
|
|
435
|
-
const threshold =
|
|
436
|
-
|
|
437
|
-
|
|
452
|
+
const threshold =
|
|
453
|
+
typeof overLight === 'object' && overLight !== null
|
|
454
|
+
? (overLight as OverLightObjectConfig).threshold || 0.7
|
|
455
|
+
: 0.7;
|
|
438
456
|
setCachedBackgroundDetection(element.parentElement, overLight, result, threshold);
|
|
439
457
|
setDetectedOverLight(result);
|
|
440
458
|
}
|
|
441
459
|
} else {
|
|
442
460
|
// Default to false if no valid background found
|
|
443
461
|
const result = false;
|
|
444
|
-
const threshold =
|
|
445
|
-
|
|
446
|
-
|
|
462
|
+
const threshold =
|
|
463
|
+
typeof overLight === 'object' && overLight !== null
|
|
464
|
+
? (overLight as OverLightObjectConfig).threshold || 0.7
|
|
465
|
+
: 0.7;
|
|
447
466
|
setCachedBackgroundDetection(element.parentElement, overLight, result, threshold);
|
|
448
467
|
setDetectedOverLight(result);
|
|
449
468
|
}
|
|
@@ -454,9 +473,10 @@ export function useAtomixGlass({
|
|
|
454
473
|
}
|
|
455
474
|
const result = false;
|
|
456
475
|
if (element && element.parentElement) {
|
|
457
|
-
const threshold =
|
|
458
|
-
|
|
459
|
-
|
|
476
|
+
const threshold =
|
|
477
|
+
typeof overLight === 'object' && overLight !== null
|
|
478
|
+
? (overLight as OverLightObjectConfig).threshold || 0.7
|
|
479
|
+
: 0.7;
|
|
460
480
|
setCachedBackgroundDetection(element.parentElement, overLight, result, threshold);
|
|
461
481
|
}
|
|
462
482
|
setDetectedOverLight(result);
|
|
@@ -537,8 +557,6 @@ export function useAtomixGlass({
|
|
|
537
557
|
return;
|
|
538
558
|
}
|
|
539
559
|
|
|
540
|
-
const startTime = enablePerformanceMonitoring ? performance.now() : 0;
|
|
541
|
-
|
|
542
560
|
// Use cached rect if available, otherwise get new one
|
|
543
561
|
let rect = cachedRectRef.current;
|
|
544
562
|
if (!rect || rect.width === 0 || rect.height === 0) {
|
|
@@ -561,14 +579,6 @@ export function useAtomixGlass({
|
|
|
561
579
|
// React 18 automatically batches these updates
|
|
562
580
|
setInternalMouseOffset(newOffset);
|
|
563
581
|
setInternalGlobalMousePosition(globalPos);
|
|
564
|
-
|
|
565
|
-
if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && enablePerformanceMonitoring) {
|
|
566
|
-
const endTime = performance.now();
|
|
567
|
-
// const duration = endTime - startTime;
|
|
568
|
-
// if (duration > 5) {
|
|
569
|
-
// console.warn(`AtomixGlass: Mouse tracking took ${duration.toFixed(2)}ms`);
|
|
570
|
-
// }
|
|
571
|
-
}
|
|
572
582
|
},
|
|
573
583
|
[
|
|
574
584
|
mouseContainer,
|
|
@@ -576,7 +586,6 @@ export function useAtomixGlass({
|
|
|
576
586
|
externalGlobalMousePosition,
|
|
577
587
|
externalMouseOffset,
|
|
578
588
|
effectiveDisableEffects,
|
|
579
|
-
enablePerformanceMonitoring,
|
|
580
589
|
]
|
|
581
590
|
);
|
|
582
591
|
|
|
@@ -692,14 +701,7 @@ export function useAtomixGlass({
|
|
|
692
701
|
Math.abs(normalizedX) * stretchIntensity * 0.15;
|
|
693
702
|
|
|
694
703
|
return `scaleX(${Math.max(0.8, scaleX)}) scaleY(${Math.max(0.8, scaleY)})`;
|
|
695
|
-
}, [
|
|
696
|
-
globalMousePosition,
|
|
697
|
-
elasticity,
|
|
698
|
-
glassSize,
|
|
699
|
-
glassRef,
|
|
700
|
-
overLight,
|
|
701
|
-
detectedOverLight,
|
|
702
|
-
]);
|
|
704
|
+
}, [globalMousePosition, elasticity, glassSize, glassRef, overLight, detectedOverLight]);
|
|
703
705
|
|
|
704
706
|
const calculateFadeInFactor = useCallback(() => {
|
|
705
707
|
if (
|
|
@@ -724,7 +726,9 @@ export function useAtomixGlass({
|
|
|
724
726
|
);
|
|
725
727
|
const edgeDistance = calculateDistance({ x: edgeDistanceX, y: edgeDistanceY }, { x: 0, y: 0 });
|
|
726
728
|
|
|
727
|
-
return edgeDistance > CONSTANTS.ACTIVATION_ZONE
|
|
729
|
+
return edgeDistance > CONSTANTS.ACTIVATION_ZONE
|
|
730
|
+
? 0
|
|
731
|
+
: 1 - edgeDistance / CONSTANTS.ACTIVATION_ZONE;
|
|
728
732
|
}, [globalMousePosition, glassSize, glassRef]);
|
|
729
733
|
|
|
730
734
|
const calculateElasticTranslation = useCallback(() => {
|
|
@@ -769,7 +773,9 @@ export function useAtomixGlass({
|
|
|
769
773
|
element !== null && element instanceof HTMLElement && element.isConnected;
|
|
770
774
|
|
|
771
775
|
const validateSize = (size: GlassSize): boolean =>
|
|
772
|
-
validateGlassSize(size) &&
|
|
776
|
+
validateGlassSize(size) &&
|
|
777
|
+
size.width <= CONSTANTS.MAX_SIZE &&
|
|
778
|
+
size.height <= CONSTANTS.MAX_SIZE;
|
|
773
779
|
|
|
774
780
|
let rafId: number | null = null;
|
|
775
781
|
let lastSize = { width: 0, height: 0 };
|
|
@@ -903,7 +909,9 @@ export function useAtomixGlass({
|
|
|
903
909
|
const activeIntensity = isActive ? 1.6 : 1;
|
|
904
910
|
|
|
905
911
|
// More robust overlight configuration with better defaults and clamping
|
|
906
|
-
const baseOpacity = isOverLight
|
|
912
|
+
const baseOpacity = isOverLight
|
|
913
|
+
? Math.min(0.6, Math.max(0.2, 0.5 * hoverIntensity * activeIntensity))
|
|
914
|
+
: 0;
|
|
907
915
|
|
|
908
916
|
const baseConfig = {
|
|
909
917
|
isOverLight,
|
|
@@ -920,11 +928,31 @@ export function useAtomixGlass({
|
|
|
920
928
|
const objConfig = overLight as OverLightObjectConfig;
|
|
921
929
|
|
|
922
930
|
// Validate and apply object config values with proper clamping
|
|
923
|
-
const validatedThreshold = validateConfigValue(
|
|
931
|
+
const validatedThreshold = validateConfigValue(
|
|
932
|
+
objConfig.threshold,
|
|
933
|
+
0.1,
|
|
934
|
+
1.0,
|
|
935
|
+
baseConfig.threshold
|
|
936
|
+
);
|
|
924
937
|
const validatedOpacity = validateConfigValue(objConfig.opacity, 0.1, 1.0, baseConfig.opacity);
|
|
925
|
-
const validatedContrast = validateConfigValue(
|
|
926
|
-
|
|
927
|
-
|
|
938
|
+
const validatedContrast = validateConfigValue(
|
|
939
|
+
objConfig.contrast,
|
|
940
|
+
0.5,
|
|
941
|
+
2.5,
|
|
942
|
+
baseConfig.contrast
|
|
943
|
+
);
|
|
944
|
+
const validatedBrightness = validateConfigValue(
|
|
945
|
+
objConfig.brightness,
|
|
946
|
+
0.5,
|
|
947
|
+
2.0,
|
|
948
|
+
baseConfig.brightness
|
|
949
|
+
);
|
|
950
|
+
const validatedSaturationBoost = validateConfigValue(
|
|
951
|
+
objConfig.saturationBoost,
|
|
952
|
+
0.5,
|
|
953
|
+
3.0,
|
|
954
|
+
baseConfig.saturationBoost
|
|
955
|
+
);
|
|
928
956
|
|
|
929
957
|
const finalConfig = {
|
|
930
958
|
...baseConfig,
|
|
@@ -936,7 +964,10 @@ export function useAtomixGlass({
|
|
|
936
964
|
};
|
|
937
965
|
|
|
938
966
|
// Debug logging
|
|
939
|
-
if (
|
|
967
|
+
if (
|
|
968
|
+
(typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') &&
|
|
969
|
+
debugOverLight
|
|
970
|
+
) {
|
|
940
971
|
console.log('[AtomixGlass] OverLight Config:', {
|
|
941
972
|
isOverLight,
|
|
942
973
|
config: {
|
|
@@ -968,7 +999,10 @@ export function useAtomixGlass({
|
|
|
968
999
|
}
|
|
969
1000
|
|
|
970
1001
|
// Debug logging for non-object configs
|
|
971
|
-
if (
|
|
1002
|
+
if (
|
|
1003
|
+
(typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') &&
|
|
1004
|
+
debugOverLight
|
|
1005
|
+
) {
|
|
972
1006
|
console.log('[AtomixGlass] OverLight Config:', {
|
|
973
1007
|
isOverLight,
|
|
974
1008
|
configType: typeof overLight === 'boolean' ? (overLight ? 'true' : 'false') : overLight,
|
|
@@ -991,7 +1025,15 @@ export function useAtomixGlass({
|
|
|
991
1025
|
}
|
|
992
1026
|
|
|
993
1027
|
return baseConfig;
|
|
994
|
-
}, [
|
|
1028
|
+
}, [
|
|
1029
|
+
overLight,
|
|
1030
|
+
getEffectiveOverLight,
|
|
1031
|
+
mouseOffset,
|
|
1032
|
+
isHovered,
|
|
1033
|
+
isActive,
|
|
1034
|
+
validateConfigValue,
|
|
1035
|
+
debugOverLight,
|
|
1036
|
+
]);
|
|
995
1037
|
|
|
996
1038
|
// Event handlers
|
|
997
1039
|
const handleMouseEnter = useCallback(() => setIsHovered(true), []);
|
|
@@ -274,7 +274,9 @@ export function useDataTable({
|
|
|
274
274
|
const visibleColumns = useMemo(() => {
|
|
275
275
|
return columnOrder
|
|
276
276
|
.map(key => columns.find(col => col.key === key))
|
|
277
|
-
.filter(
|
|
277
|
+
.filter(
|
|
278
|
+
(col): col is DataTableColumn => col !== undefined && columnVisibility[col.key] !== false
|
|
279
|
+
);
|
|
278
280
|
}, [columns, columnOrder, columnVisibility]);
|
|
279
281
|
|
|
280
282
|
// Handle sorting
|
|
@@ -299,13 +301,10 @@ export function useDataTable({
|
|
|
299
301
|
);
|
|
300
302
|
|
|
301
303
|
// Handle page change
|
|
302
|
-
const handlePageChange = useCallback(
|
|
303
|
-
(page
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
},
|
|
307
|
-
[]
|
|
308
|
-
);
|
|
304
|
+
const handlePageChange = useCallback((page: number) => {
|
|
305
|
+
if (page < 1) return;
|
|
306
|
+
setCurrentPage(page);
|
|
307
|
+
}, []);
|
|
309
308
|
|
|
310
309
|
// Handle search
|
|
311
310
|
const handleSearch = useCallback((query: string) => {
|
|
@@ -330,7 +329,13 @@ export function useDataTable({
|
|
|
330
329
|
|
|
331
330
|
// Pre-process column filters to avoid redundant lookups and transformations
|
|
332
331
|
const activeColumnFilters = useMemo(() => {
|
|
333
|
-
if (!columnFilters)
|
|
332
|
+
if (!columnFilters)
|
|
333
|
+
return [] as Array<{
|
|
334
|
+
key: string;
|
|
335
|
+
value: string;
|
|
336
|
+
lowercaseValue: string;
|
|
337
|
+
column: DataTableColumn;
|
|
338
|
+
}>;
|
|
334
339
|
|
|
335
340
|
return Object.entries(columnFilterValues)
|
|
336
341
|
.filter(([, value]) => value !== undefined && value !== null && value !== '')
|
|
@@ -341,7 +346,8 @@ export function useDataTable({
|
|
|
341
346
|
return {
|
|
342
347
|
key: columnKey,
|
|
343
348
|
value,
|
|
344
|
-
lowercaseValue:
|
|
349
|
+
lowercaseValue:
|
|
350
|
+
typeof value === 'string' ? value.toLowerCase() : String(value).toLowerCase(),
|
|
345
351
|
column,
|
|
346
352
|
};
|
|
347
353
|
})
|
|
@@ -369,7 +375,9 @@ export function useDataTable({
|
|
|
369
375
|
|
|
370
376
|
// Apply column-specific filters
|
|
371
377
|
for (let i = 0; i < activeColumnFilters.length; i++) {
|
|
372
|
-
const
|
|
378
|
+
const filter = activeColumnFilters[i];
|
|
379
|
+
if (!filter) continue;
|
|
380
|
+
const { key, value, lowercaseValue, column } = filter;
|
|
373
381
|
const cellValue = row[key];
|
|
374
382
|
|
|
375
383
|
if (cellValue == null) return false;
|
|
@@ -451,7 +459,9 @@ export function useDataTable({
|
|
|
451
459
|
}
|
|
452
460
|
|
|
453
461
|
if (onSelectionChange) {
|
|
454
|
-
const selectedRowsData = sortedData.filter(row =>
|
|
462
|
+
const selectedRowsData = sortedData.filter(row =>
|
|
463
|
+
newSelectedIds.includes(getRowId(row, rowKey))
|
|
464
|
+
);
|
|
455
465
|
onSelectionChange(selectedRowsData, newSelectedIds);
|
|
456
466
|
}
|
|
457
467
|
},
|
|
@@ -463,16 +473,16 @@ export function useDataTable({
|
|
|
463
473
|
(selected: boolean) => {
|
|
464
474
|
if (selectionMode !== 'multiple') return;
|
|
465
475
|
|
|
466
|
-
const newSelectedIds = selected
|
|
467
|
-
? paginatedData.map(row => getRowId(row, rowKey))
|
|
468
|
-
: [];
|
|
476
|
+
const newSelectedIds = selected ? paginatedData.map(row => getRowId(row, rowKey)) : [];
|
|
469
477
|
|
|
470
478
|
if (!controlledSelectedRowIds) {
|
|
471
479
|
setInternalSelectedRowIds(newSelectedIds);
|
|
472
480
|
}
|
|
473
481
|
|
|
474
482
|
if (onSelectionChange) {
|
|
475
|
-
const selectedRowsData = sortedData.filter(row =>
|
|
483
|
+
const selectedRowsData = sortedData.filter(row =>
|
|
484
|
+
newSelectedIds.includes(getRowId(row, rowKey))
|
|
485
|
+
);
|
|
476
486
|
onSelectionChange(selectedRowsData, newSelectedIds);
|
|
477
487
|
}
|
|
478
488
|
},
|
|
@@ -488,7 +498,9 @@ export function useDataTable({
|
|
|
488
498
|
// Check if some rows are selected (indeterminate)
|
|
489
499
|
const isIndeterminate = useMemo(() => {
|
|
490
500
|
if (selectionMode !== 'multiple' || paginatedData.length === 0) return false;
|
|
491
|
-
const selectedCount = paginatedData.filter(row =>
|
|
501
|
+
const selectedCount = paginatedData.filter(row =>
|
|
502
|
+
selectedRowIds.includes(getRowId(row, rowKey))
|
|
503
|
+
).length;
|
|
492
504
|
return selectedCount > 0 && selectedCount < paginatedData.length;
|
|
493
505
|
}, [selectionMode, paginatedData, selectedRowIds, rowKey]);
|
|
494
506
|
|