Merge branch 'master' into master

StenaIT · Oct 25, 2024 · be5fa3b · be5fa3b
2 parents 5bd4c01 + 7f341a8
commit be5fa3b
Show file tree

Hide file tree

Showing 50 changed files with 756 additions and 432 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -24,6 +24,7 @@ const config: StorybookConfig = {
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-mdx-gfm"),
     getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-mdx-gfm")
   ],
   viteFinal(config, { configType }) {
     let plugins = [

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -20,3 +20,4 @@ export const parameters = {
   },
   controls: { expanded: true },
 };
+export const tags = ["autodocs"];
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,79 @@
+# v21.16.1 (Fri Oct 25 2024)
+
+#### 🐛 Bug Fix
+
+- `@stenajs-webui/grid`
+  - Update horror story to work with new popover [#876](https://github.com/StenaIT/stenajs-webui/pull/876) ([@mattias800](https://github.com/mattias800))
+
+#### Authors: 1
+
+- Mattias Andersson ([@mattias800](https://github.com/mattias800))
+
+---
+
+# v21.16.0 (Fri Oct 25 2024)
+
+#### 🚀 Enhancement
+
+- `@stenajs-webui/tooltip`
+  - Add onOpened and onClosed props to Popover [#875](https://github.com/StenaIT/stenajs-webui/pull/875) ([@Luddelito](https://github.com/Luddelito) [@nikteg](https://github.com/nikteg))
+
+#### Authors: 2
+
+- Ludvig Lignell ([@Luddelito](https://github.com/Luddelito))
+- Niklas ([@nikteg](https://github.com/nikteg))
+
+---
+
+# v21.15.0 (Wed Oct 23 2024)
+
+#### 🚀 Enhancement
+
+- `@stenajs-webui/calendar`
+  - Improve type and run-time safety for locale codes [#871](https://github.com/StenaIT/stenajs-webui/pull/871) ([@mattias800](https://github.com/mattias800))
+
+#### Authors: 1
+
+- Mattias Andersson ([@mattias800](https://github.com/mattias800))
+
+---
+
+# v21.14.0 (Wed Oct 23 2024)
+
+#### 🚀 Enhancement
+
+- `@stenajs-webui/calendar`
+  - Locale mapping falls back to language match only [#870](https://github.com/StenaIT/stenajs-webui/pull/870) ([@mattias800](https://github.com/mattias800))
+
+#### Authors: 1
+
+- Mattias Andersson ([@mattias800](https://github.com/mattias800))
+
+---
+
+# v21.13.0 (Wed Oct 23 2024)
+
+#### 🚀 Enhancement
+
+- `@stenajs-webui/calendar`
+  - Fix MonthPicker having wrong locale [#868](https://github.com/StenaIT/stenajs-webui/pull/868) ([@mattias800](https://github.com/mattias800))
+
+#### 📝 Documentation
+
+- `@stenajs-webui/calendar`, `@stenajs-webui/elements`, `@stenajs-webui/filter`, `@stenajs-webui/forms`, `@stenajs-webui/grid-export`, `@stenajs-webui/grid`, `@stenajs-webui/input-mask`, `@stenajs-webui/modal`, `@stenajs-webui/panels`, `@stenajs-webui/redux`, `@stenajs-webui/select`, `@stenajs-webui/theme`, `@stenajs-webui/tooltip`
+  - Upgrade Storybook to 8.3.6 [#865](https://github.com/StenaIT/stenajs-webui/pull/865) ([@mattias800](https://github.com/mattias800))
+
+#### 🔩 Dependency Updates
+
+- Bump jsdom from 24.0.0 to 25.0.1 [#854](https://github.com/StenaIT/stenajs-webui/pull/854) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+
+#### Authors: 2
+
+- [@dependabot[bot]](https://github.com/dependabot[bot])
+- Mattias Andersson ([@mattias800](https://github.com/mattias800))
+
+---
+
 # v21.12.1 (Fri Oct 11 2024)
 
 #### 🐛 Bug Fix

diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "21.12.1",
+  "version": "21.16.1",
   "command": {
     "publish": {
       "verifyAccess": false

diff --git a/package.json b/package.json
@@ -52,17 +52,17 @@
     "@eslint/js": "9.12.0",
     "@fortawesome/free-brands-svg-icons": "6.6.0",
     "@fortawesome/free-solid-svg-icons": "6.6.0",
-    "@storybook/addon-a11y": "^8.3.5",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-mdx-gfm": "^8.3.5",
-    "@storybook/addon-storysource": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-vite": "^8.3.5",
-    "@storybook/test": "^8.3.5",
-    "@storybook/theming": "^8.3.5",
+    "@storybook/addon-a11y": "^8.3.6",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-mdx-gfm": "^8.3.6",
+    "@storybook/addon-storysource": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-vite": "^8.3.6",
+    "@storybook/test": "^8.3.6",
+    "@storybook/theming": "^8.3.6",
     "@testing-library/dom": "10.4.0",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -95,7 +95,7 @@
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "18.3.1",
     "run-script-os": "^1.1.6",
-    "storybook": "^8.3.5",
+    "storybook": "^8.3.6",
     "svgpath": "2.6.0",
     "svgson": "5.3.1",
     "tslib": "2.7.0",

diff --git a/packages/calendar/package.json b/packages/calendar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stenajs-webui/calendar",
-  "version": "21.12.1",
+  "version": "21.16.1",
   "type": "module",
   "description": "",
   "author": "mattias800",
@@ -28,17 +28,17 @@
     "start": "yarn tsc -p tsconfig.build.json && yarn vite build --watch",
     "test": "vitest run",
     "clean": "rimraf dist",
-    "prepare": "yarn clean && yarn run build",
-    "predeploy": "cd example && yarn install && yarn run build",
+    "prepare": "yarn clean && yarn build",
+    "predeploy": "cd example && yarn install && yarn build",
     "deploy": "gh-pages -d example/build"
   },
   "dependencies": {
-    "@stenajs-webui/core": "21.12.1",
-    "@stenajs-webui/elements": "21.12.1",
-    "@stenajs-webui/forms": "21.12.1",
-    "@stenajs-webui/input-mask": "21.12.1",
-    "@stenajs-webui/theme": "21.12.1",
-    "@stenajs-webui/tooltip": "21.12.1",
+    "@stenajs-webui/core": "21.16.1",
+    "@stenajs-webui/elements": "21.16.1",
+    "@stenajs-webui/forms": "21.16.1",
+    "@stenajs-webui/input-mask": "21.16.1",
+    "@stenajs-webui/theme": "21.16.1",
+    "@stenajs-webui/tooltip": "21.16.1",
     "classnames": "^2.3.1",
     "date-fns": "4.1.0",
     "lodash-es": "^4.17.21"

diff --git a/packages/calendar/src/components/calendar-types/travel-date-calendar/TravelDateCalendar.tsx b/packages/calendar/src/components/calendar-types/travel-date-calendar/TravelDateCalendar.tsx
@@ -10,10 +10,11 @@ import {
 import { useTravelDateInput } from "../../../features/travel-calendar/hooks/UseTravelDateInput";
 import { TravelDateTextInputField } from "../../../features/travel-calendar/components/TravelDateTextInputField";
 import { DateTextInputVariant } from "../../../features/travel-calendar/types";
+import { SupportedLocaleCode } from "../../../features/localize-date-format/LocaleMapper";
 
 export interface TravelDateCalendarProps
   extends ValueAndOnValueChangeProps<string> {
-  localeCode?: string;
+  localeCode?: SupportedLocaleCode;
   initialMonthInFocus?: Date;
   label?: string;
   previousMonthButtonAriaLabel?: string;
@@ -110,6 +111,7 @@ export const TravelDateCalendar: React.FC<TravelDateCalendarProps> = ({
           firstMonth={firstMonthInMonthPicker}
           numMonths={numMonthsInMonthPicker}
           value={visibleMonth}
+          localeCode={localeCode}
           size={size}
           onValueChange={(v) => {
             setVisibleMonth(v);

diff --git a/...ndar/src/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.tsx b/...ndar/src/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.tsx
@@ -13,10 +13,11 @@ import {
   DateTextInputVariant,
   TravelDateRangeInputValue,
 } from "../../../features/travel-calendar/types";
+import { SupportedLocaleCode } from "../../../features/localize-date-format/LocaleMapper";
 
 export interface TravelDateRangeCalendarProps
   extends ValueAndOnValueChangeProps<TravelDateRangeInputValue> {
-  localeCode?: string;
+  localeCode?: SupportedLocaleCode;
   initialMonthInFocus?: Date;
   startDateLabel?: string;
   endDateLabel?: string;
@@ -118,6 +119,7 @@ export const TravelDateRangeCalendar: React.FC<
           numMonths={numMonthsInMonthPicker}
           value={visibleMonth}
           size={size}
+          localeCode={localeCode}
           onValueChange={(v) => {
             setVisibleMonth(v);
             setVisiblePanel("calendar");

diff --git a/packages/calendar/src/components/input-types/date-input/DateInput.stories.tsx b/packages/calendar/src/components/input-types/date-input/DateInput.stories.tsx
@@ -4,13 +4,13 @@ import * as React from "react";
 import { useState } from "react";
 import { setDayStateValue } from "../../../util/calendar/StateModifier";
 import { DateInput } from "./DateInput";
-import { Story } from "@storybook/react";
+import { StoryFn } from "@storybook/react";
 
 export default {
   title: "calendar/Input/DateInput",
   component: DateInput,
   decorators: [
-    (TheStory: Story) => (
+    (TheStory: StoryFn) => (
       <div style={{ marginBottom: "400px" }}>
         <TheStory />
       </div>

diff --git a/packages/calendar/src/components/input-types/date-input/DateInput.tsx b/packages/calendar/src/components/input-types/date-input/DateInput.tsx
@@ -39,8 +39,10 @@ export interface DateInputProps<T = unknown>
    */
   placeholder?: string;
   /**
-   *  Portal target, HTML element. If not set, portal is not used.
+   *  Portal target, HTML element. If not set, window.body is used.
    */
+  portalTarget?: HTMLElement;
+  zIndex?: number;
   width?: string;
   /**
    * The calendar theme to use.
@@ -68,6 +70,8 @@ export const DateInput: React.FC<DateInputProps> = ({
   minDate,
   maxDate = defaultMaxDate,
   disabled,
+  portalTarget,
+  zIndex,
 }) => {
   const { hideCalendar, showingCalendar, onSelectDate, showCalendar } =
     useDateInput(onChange, onClose, openOnMount);
@@ -78,6 +82,8 @@ export const DateInput: React.FC<DateInputProps> = ({
         hideArrow
         open={showingCalendar}
         onRequestClose={hideCalendar}
+        appendTo={portalTarget}
+        zIndex={zIndex}
         renderTrigger={(props) => (
           <Box {...props}>
             <TextInput

diff --git a/.../src/components/input-types/date-range-dual-text-input/DateRangeDualTextInput.stories.tsx b/.../src/components/input-types/date-range-dual-text-input/DateRangeDualTextInput.stories.tsx
@@ -1,5 +1,5 @@
 import { Column, Txt } from "@stenajs-webui/core";
-import { Story } from "@storybook/react";
+import { StoryFn } from "@storybook/react";
 import { addDays, format } from "date-fns";
 import * as React from "react";
 import { useState } from "react";
@@ -11,7 +11,7 @@ export default {
   title: "calendar/Input/DateRangeDualTextInput",
   component: DateRangeDualTextInput,
   decorators: [
-    (TheStory: Story) => (
+    (TheStory: StoryFn) => (
       <div style={{ marginBottom: "400px" }}>
         <TheStory />
       </div>
@@ -124,24 +124,6 @@ export const RangeSelected = () => {
   );
 };
 
-export const WithHiddenYearPagination = () => {
-  const [value, setValue] = useState<DateRange | undefined>(undefined);
-  const props = useDateRangeCalendarState();
-
-  return (
-    <div style={{ display: "inline-block" }}>
-      <DateRangeDualTextInput
-        value={value}
-        onValueChange={setValue}
-        calendarProps={{
-          hideYearPagination: true,
-        }}
-        {...props}
-      />
-    </div>
-  );
-};
-
 export const MinMaxDates = () => {
   const [value, setValue] = useState<DateRange | undefined>(undefined);
   const props = useDateRangeCalendarState();

diff --git a/packages/calendar/src/components/input-types/date-range-input/DateRangeInput.stories.tsx b/packages/calendar/src/components/input-types/date-range-input/DateRangeInput.stories.tsx
@@ -1,5 +1,5 @@
 import { Column } from "@stenajs-webui/core";
-import { Story } from "@storybook/react";
+import { StoryFn } from "@storybook/react";
 import { addDays, format, subDays } from "date-fns";
 import * as React from "react";
 import { useState } from "react";
@@ -10,7 +10,7 @@ export default {
   title: "calendar/Input/DateRangeInput",
   component: DateRangeInput,
   decorators: [
-    (TheStory: Story) => (
+    (TheStory: StoryFn) => (
       <div style={{ marginBottom: "400px" }}>
         <TheStory />
       </div>

diff --git a/packages/calendar/src/components/input-types/date-range-input/DateRangeInput.tsx b/packages/calendar/src/components/input-types/date-range-input/DateRangeInput.tsx
@@ -64,6 +64,12 @@ export interface DateRangeInputProps<T>
    * Disables the Popover and both TextInputs.
    */
   disabled?: boolean;
+
+  /**
+   *  Portal target, HTML element. If not set, window.body is used.
+   */
+  portalTarget?: HTMLElement;
+  zIndex?: number;
 }
 
 /**
@@ -81,6 +87,8 @@ export function DateRangeInput<T>({
   minDate,
   maxDate = defaultMaxDate,
   disabled,
+  portalTarget,
+  zIndex,
 }: DateRangeInputProps<T>): React.ReactElement<DateRangeInputProps<T>> {
   const [currentPanel, setCurrentPanel] =
     useState<CalendarPanelType>("calendar");
@@ -109,6 +117,8 @@ export function DateRangeInput<T>({
   return (
     <ControlledPopover
       hideArrow
+      appendTo={portalTarget}
+      zIndex={zIndex}
       renderTrigger={(props) => (
         <Row alignItems={"center"} {...props}>
           <TextInput

diff --git a/packages/calendar/src/components/input-types/date-text-input/DateTextInput.stories.tsx b/packages/calendar/src/components/input-types/date-text-input/DateTextInput.stories.tsx
@@ -2,13 +2,13 @@ import { Column } from "@stenajs-webui/core";
 import { DateTextInput } from "./DateTextInput";
 import * as React from "react";
 import { useState } from "react";
-import { Story } from "@storybook/react";
+import { StoryFn } from "@storybook/react";
 
 export default {
   title: "calendar/Input/DateTextInput",
   component: DateTextInput,
   decorators: [
-    (TheStory: Story) => (
+    (TheStory: StoryFn) => (
       <div style={{ marginBottom: "400px" }}>
         <TheStory />
       </div>

diff --git a/packages/calendar/src/components/input-types/date-text-input/DateTextInput.tsx b/packages/calendar/src/components/input-types/date-text-input/DateTextInput.tsx
@@ -40,6 +40,11 @@ export interface DateTextInputProps<T>
   placeholder?: string;
   /** The date text input theme to use. */
   calendarTheme?: CalendarTheme;
+  /**
+   *  Portal target for the popover, HTML element. If not set, window.body is used.
+   */
+  portalTarget?: HTMLElement;
+  zIndex?: number;
 }
 
 export const DateTextInput: React.FC<DateTextInputProps<unknown>> = ({
@@ -56,6 +61,8 @@ export const DateTextInput: React.FC<DateTextInputProps<unknown>> = ({
   minDate,
   maxDate = defaultMaxDate,
   variant,
+  portalTarget,
+  zIndex,
   ...props
 }) => {
   const [open, setOpen] = useState(false);
@@ -107,6 +114,8 @@ export const DateTextInput: React.FC<DateTextInputProps<unknown>> = ({
   return (
     <Box width={width}>
       <ControlledPopover
+        appendTo={portalTarget}
+        zIndex={zIndex}
         renderTrigger={(popoverProps) => (
           <TextInput
             {...props}