@hyphen/hyphen-components 7.6.1 → 7.7.0

package/dist/index.d.ts

@@ -4,13 +4,12 @@ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { BorderRadiusSize as BorderRadiusSize$1, BreakpointSize, SpacingSize, WidthSize, HeightSize, BackgroundColor, BorderColor, BorderSize, FontColor, FontFamily, FontSize, FontWeight, BoxShadowSize, TextTransform, TextWrap, ZIndexSize, IconName, HeadingSize, ColorName, BaseColor, LineHeightSize } from '@hyphen/hyphen-design-tokens/build/types';
 export { BackgroundColor, BaseColor, BorderColor, BorderSize, BoxShadowSize, BreakpointSize, ColorName, FontColor, FontFamily, FontSize, FontWeight, HeadingSize, HeightSize, IconName, LineHeightSize, SpacingSize, TextDecorationLine, TextDecorationStyle, TextTransform, TextWrap, WhiteSpace, WidthSize, WordBreak, ZIndexSize } from '@hyphen/hyphen-design-tokens/build/types';
 import * as CSS from 'csstype';
-import { DayPickerProps } from 'react-day-picker';
-export { Matcher } from 'react-day-picker';
+import { DayPickerProps } from '@daypicker/react';
+export { Matcher } from '@daypicker/react';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { FieldAttributes, FormikTouched, FormikValues, FormikErrors } from 'formik';
-import { OnChangeValue, OptionsOrGroups } from 'react-select';
-import { GroupBase } from 'react-select/dist/declarations/src/types';
+import { OnChangeValue, OptionsOrGroups, GroupBase } from 'react-select';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "7.6.1",
+  "version": "7.7.0",
+  "packageManager": "pnpm@10.20.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -30,8 +31,8 @@
     "test": "jest --passWithNoTests",
     "test-watch": "jest --coverage --watch",
     "semantic-release": "semantic-release",
-    "prepare": "npm run build",
-    "chromatic": "npx chromatic --project-token=chpt_8fddffb5556f0b7 --only-changed"
+    "prepare": "pnpm run build",
+    "chromatic": "chromatic --project-token=chpt_8fddffb5556f0b7 --only-changed"
   },
   "husky": {
     "hooks": {
@@ -48,7 +49,7 @@
     "react": ">=16"
   },
   "engines": {
-    "node": ">=20"
+    "node": ">=20.19.0 <21 || >=22.12.0"
   },
   "size-limit": [
     {
@@ -61,38 +62,39 @@
     }
   ],
   "dependencies": {
+    "@daypicker/react": "^10.0.1",
     "@emotion/react": "^11.14.0",
-    "@hyphen/hyphen-design-tokens": "^7.6.0",
-    "@radix-ui/react-aspect-ratio": "^1.1.8",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-toggle": "^1.1.10",
-    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.8",
+    "@hyphen/hyphen-design-tokens": "^7.7.0",
+    "@radix-ui/react-aspect-ratio": "^1.1.9",
+    "@radix-ui/react-collapsible": "^1.1.13",
+    "@radix-ui/react-dropdown-menu": "^2.1.17",
+    "@radix-ui/react-popover": "^1.1.16",
+    "@radix-ui/react-slot": "^1.2.5",
+    "@radix-ui/react-toggle": "^1.1.11",
+    "@radix-ui/react-toggle-group": "^1.1.12",
+    "@radix-ui/react-tooltip": "^1.2.9",
     "@types/react-modal": "^3.16.3",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
-    "formik": "^2.4.6",
-    "react-day-picker": "^9.11.3",
+    "formik": "^2.4.9",
     "react-focus-lock": "^2.13.2",
     "react-modal": "^3.16.3",
-    "react-remove-scroll": "^2.6.3",
-    "react-router-dom": "^6.26.1",
+    "react-remove-scroll": "^2.7.2",
+    "react-router-dom": "^6.30.4",
     "react-select": "^5.10.0",
     "react-select-event": "^5.5.1",
-    "uuid": "^11.1.0"
+    "uuid": "^11.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",
-    "@chromatic-com/storybook": "^4.1.3",
+    "@chromatic-com/storybook": "^5.2.1",
     "@semantic-release/commit-analyzer": "^11.1.0",
     "@size-limit/preset-small-lib": "^11.2.0",
-    "@storybook/addon-a11y": "^9.1.3",
-    "@storybook/addon-docs": "^9.1.3",
-    "@storybook/addon-themes": "^9.1.3",
-    "@storybook/react-vite": "^9.1.3",
+    "@storybook/addon-a11y": "10.4.2",
+    "@storybook/addon-docs": "10.4.2",
+    "@storybook/addon-themes": "10.4.2",
+    "@storybook/addon-vitest": "10.4.2",
+    "@storybook/react-vite": "10.4.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -105,24 +107,31 @@
     "@types/react-modal": "^3.16.3",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
+    "@vitest/browser-playwright": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.8",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.1.3",
-    "chromatic": "^13.3.4",
+    "chromatic": "^13.3.5",
     "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.11.0",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "cssnano": "^6.1.2",
     "csstype": "^3.1.3",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "10.4.2",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.2.0",
     "jest-preview": "^0.3.1",
     "mini-css-extract-plugin": "^2.9.1",
+    "playwright": "^1.60.0",
+    "postcss": "^8.4.47",
     "postcss-loader": "^7.3.4",
     "postcss-modules": "^6.0.0",
     "react": "^18.3.1",
@@ -132,13 +141,14 @@
     "sass-loader": "^13.3.3",
     "semantic-release": "^25.0.2",
     "size-limit": "^11.2.0",
-    "storybook": "^9.1.3",
+    "storybook": "10.4.2",
     "ts-jest": "^29.4.6",
     "tslib": "^2.8.1",
     "tsup": "^8.0.0",
     "typescript": "^5.9.3",
     "url-loader": "^4.1.1",
-    "vite": "^5.4.19",
+    "vite": "^6.4.2",
+    "vitest": "^4.1.8",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
     "webpack-fix-style-only-entries": "^0.6.1"

package/src/components/Calendar/Calendar.stories.tsx

@@ -2,7 +2,7 @@ import { Calendar } from './Calendar';
 
 import type { Meta } from '@storybook/react-vite';
 import React, { useState, ChangeEvent } from 'react';
-import { type DateRange } from 'react-day-picker';
+import { type DateRange } from '@daypicker/react';
 import { TextInput } from '../TextInput/TextInput';
 import { format, isValid, parse } from 'date-fns';
 

package/src/components/Calendar/Calendar.test.tsx

@@ -76,7 +76,6 @@ describe('Calendar', () => {
         />
       );
 
-      // In react-day-picker v9, we need to click the button inside the day cell
       const dayButton = screen.getByRole('button', { name: /June 16th/i });
       fireEvent.click(dayButton);
 
@@ -214,6 +213,13 @@ describe('Calendar', () => {
         '--rdp-accent-color': 'var(--color-font-base)',
       });
     });
+
+    test('applies table width class to the month grid', () => {
+      const { container } = render(<Calendar />);
+      const monthGrid = container.querySelector('.rdp-month_grid');
+
+      expect(monthGrid).toHaveClass('w-100');
+    });
   });
 
   describe('Chevron icons', () => {

package/src/components/Calendar/Calendar.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import classNames from 'classnames';
 import {
   DayPicker,
-  DayPickerProps,
   getDefaultClassNames,
-  Matcher,
-} from 'react-day-picker';
-import 'react-day-picker/style.css';
+  type DayPickerProps,
+  type Matcher,
+} from '@daypicker/react';
+import '@daypicker/react/style.css';
 import { Icon } from '../Icon/Icon';
 
 export type CalendarProps = DayPickerProps;
@@ -74,11 +74,10 @@ function Calendar({
         selected: classNames(
           'font-color-inverse background-color-inverse hover:font-color-inverse'
         ),
-        month_grid: classNames(defaultClassNames.month_grid, 'm-top-lg'),
+        month_grid: classNames(defaultClassNames.month_grid, 'm-top-lg w-100'),
         day: classNames(defaultClassNames.day, 'hover:font-color-base'),
         day_button: classNames(defaultClassNames.day_button),
         range_middle: classNames(defaultClassNames.range_middle),
-        table: classNames('w-100'),
         dropdowns: classNames(defaultClassNames.dropdowns, 'h-100'),
         caption_label: classNames(defaultClassNames.caption_label, 'g-2xs'),
       }}

package/src/components/SelectInput/SelectInput.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import Select, {
   components,
   ClearIndicatorProps,
+  GroupBase,
   OptionsOrGroups,
   OnChangeValue,
 } from 'react-select';
@@ -16,7 +17,6 @@ import { Icon } from '../Icon/Icon';
 import { FormLabel } from '../FormLabel/FormLabel';
 import { InputValidationMessage } from '../InputValidationMessage/InputValidationMessage';
 import styles from './SelectInput.module.scss';
-import { GroupBase } from 'react-select/dist/declarations/src/types';
 
 type SelectOption = {
   value: string;

package/src/components/Table/Table.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta } from '@storybook/react-vite';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Table } from './Table';
 import { Button } from '../Button/Button';
 import { Badge } from '../Badge/Badge';
@@ -208,20 +208,16 @@ export const Sortable = () => {
       return;
     }
     const newSortDirection = getNewSortDirection(sortedKey, sortedColumn);
+    const sortedData =
+      newSortDirection === 'ascending'
+        ? sortAscending(tableData, sortedKey)
+        : sortDescending(tableData, sortedKey);
     setSortedColumn({
       dataKey: sortedKey,
       sortDirection: newSortDirection,
     });
+    setTableData(sortedData);
   };
-  useEffect(() => {
-    if (sortedColumn.dataKey && sortedColumn.sortDirection) {
-      const sortedData =
-        sortedColumn.sortDirection === 'ascending'
-          ? sortAscending(tableData, sortedColumn.dataKey)
-          : sortDescending(tableData, sortedColumn.dataKey);
-      setTableData(sortedData);
-    }
-  }, [sortedColumn, tableData]);
   const columnConfig = [
     { heading: 'ID', dataKey: 'id', isSortable: true },
     { heading: 'Color', dataKey: 'color', isSortable: true },
@@ -276,20 +272,16 @@ export const SortablewithDefaultSortedColumn = () => {
       return;
     }
     const newSortDirection = getNewSortDirection(sortedKey, sortedColumn);
+    const sortedData =
+      newSortDirection === 'ascending'
+        ? sortAscending(tableData, sortedKey)
+        : sortDescending(tableData, sortedKey);
     setSortedColumn({
       dataKey: sortedKey,
       sortDirection: newSortDirection,
     });
+    setTableData(sortedData);
   };
-  useEffect(() => {
-    if (sortedColumn.dataKey && sortedColumn.sortDirection) {
-      const sortedData =
-        sortedColumn.sortDirection === 'ascending'
-          ? sortAscending(tableData, sortedColumn.dataKey)
-          : sortDescending(tableData, sortedColumn.dataKey);
-      setTableData(sortedData);
-    }
-  }, [sortedColumn, tableData]);
   const columnConfig = [
     { heading: 'ID', dataKey: 'id', isSortable: true },
     { heading: 'Color', dataKey: 'color', isSortable: true },
@@ -336,20 +328,16 @@ export const SortableAndLoading = () => {
       return;
     }
     const newSortDirection = getNewSortDirection(sortedKey, sortedColumn);
+    const sortedData =
+      newSortDirection === 'ascending'
+        ? sortAscending(tableData, sortedKey)
+        : sortDescending(tableData, sortedKey);
     setSortedColumn({
       dataKey: sortedKey,
       sortDirection: newSortDirection,
     });
+    setTableData(sortedData);
   };
-  useEffect(() => {
-    if (sortedColumn.dataKey && sortedColumn.sortDirection) {
-      const sortedData =
-        sortedColumn.sortDirection === 'ascending'
-          ? sortAscending(tableData, sortedColumn.dataKey)
-          : sortDescending(tableData, sortedColumn.dataKey);
-      setTableData(sortedData);
-    }
-  }, [sortedColumn, tableData]);
   const columnConfig = [
     { heading: 'ID', dataKey: 'id', isSortable: true },
     { heading: 'Color', dataKey: 'color', isSortable: true },

package/src/docs/GetStarted.mdx

@@ -6,7 +6,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 ### 1. Install
 
-`yarn add @hyphen/hyphen-components`
+`pnpm add @hyphen/hyphen-components`
 
 or