@marigold/components 7.2.0 → 7.3.1

package/dist/index.d.mts

@@ -10,6 +10,7 @@ export { ThemeProvider, useTheme } from '@marigold/system';
 import { NonZeroPercentage, HtmlProps, DistributiveOmit } from '@marigold/types';
 import RAC, { ValidationResult, Key, DateValue, TagListProps } from 'react-aria-components';
 export { Form, FormProps } from 'react-aria-components';
+export { I18nProvider } from '@react-aria/i18n';
 import { AriaTableProps } from '@react-aria/table';
 import { TableStateProps, RowProps as RowProps$1, TableBody, Cell, TableHeader, ColumnProps as ColumnProps$1 } from '@react-stately/table';
 export { VisuallyHidden } from '@react-aria/visually-hidden';
@@ -101,6 +102,7 @@ interface AutocompleteProps extends Omit<RAC.ComboBoxProps<object>, RemovedProps
     defaultValue?: RAC.ComboBoxProps<object>['defaultInputValue'];
     value?: RAC.ComboBoxProps<object>['inputValue'];
     onChange?: RAC.ComboBoxProps<object>['onInputChange'];
+    onClear?: () => void;
     disabled?: RAC.ComboBoxProps<object>['isDisabled'];
     required?: RAC.ComboBoxProps<object>['isRequired'];
     error?: RAC.ComboBoxProps<object>['isInvalid'];

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export { ThemeProvider, useTheme } from '@marigold/system';
 import { NonZeroPercentage, HtmlProps, DistributiveOmit } from '@marigold/types';
 import RAC, { ValidationResult, Key, DateValue, TagListProps } from 'react-aria-components';
 export { Form, FormProps } from 'react-aria-components';
+export { I18nProvider } from '@react-aria/i18n';
 import { AriaTableProps } from '@react-aria/table';
 import { TableStateProps, RowProps as RowProps$1, TableBody, Cell, TableHeader, ColumnProps as ColumnProps$1 } from '@react-stately/table';
 export { VisuallyHidden } from '@react-aria/visually-hidden';
@@ -101,6 +102,7 @@ interface AutocompleteProps extends Omit<RAC.ComboBoxProps<object>, RemovedProps
     defaultValue?: RAC.ComboBoxProps<object>['defaultInputValue'];
     value?: RAC.ComboBoxProps<object>['inputValue'];
     onChange?: RAC.ComboBoxProps<object>['onInputChange'];
+    onClear?: () => void;
     disabled?: RAC.ComboBoxProps<object>['isDisabled'];
     required?: RAC.ComboBoxProps<object>['isRequired'];
     error?: RAC.ComboBoxProps<object>['isInvalid'];

package/dist/index.js

@@ -60,6 +60,7 @@ __export(src_exports, {
   Form: () => import_react_aria_components20.Form,
   Header: () => _Header,
   Headline: () => _Headline,
+  I18nProvider: () => import_i18n.I18nProvider,
   Image: () => Image,
   Inline: () => Inline,
   Input: () => _Input,
@@ -320,7 +321,15 @@ var Accordion = ({ children, ...props }) => {
     selectionMode: "single",
     ...ownProps
   });
-  const { accordionProps } = (0, import_accordion.useAccordion)({ ...ownProps }, state, ref);
+  const { accordionProps } = (0, import_accordion.useAccordion)(
+    /**
+     * Disable "cmd+a" (open all) hotkey for now, since it will not work
+     * with forms inside the accordion. (see DSTSUP-22)
+     */
+    { ...ownProps, disallowSelectAll: true },
+    state,
+    ref
+  );
   delete accordionProps.onKeyDownCapture;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ...accordionProps, ref, children: [...state.collection].map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     AccordionItem,
@@ -674,6 +683,7 @@ var import_system14 = require("@marigold/system");
 
 // src/Provider/index.ts
 var import_system13 = require("@marigold/system");
+var import_i18n = require("@react-aria/i18n");
 
 // src/Provider/MarigoldProvider.tsx
 var import_overlays = require("@react-aria/overlays");
@@ -738,7 +748,7 @@ var _Popover = (0, import_react12.forwardRef)(
       component: "Popover",
       variant: placement,
       // Make Popover as wide as trigger element
-      className: "w-[--trigger-width]"
+      className: "min-w-[--trigger-width]"
     });
     const isSmallScreen = (0, import_system15.useSmallScreen)();
     const portal = usePortalContainer();
@@ -807,13 +817,20 @@ var _Button = (0, import_react13.forwardRef)(
 
 // src/Autocomplete/ClearButton.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var AutocompleteClearButton = ({ className }) => {
+var AutocompleteClearButton = ({
+  className,
+  onClear
+}) => {
   let state = import_react14.default.useContext(import_react_aria_components10.ComboBoxStateContext);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     _Button,
     {
       "aria-label": "Clear",
-      onPress: () => state == null ? void 0 : state.setInputValue(""),
+      "data-testid": "clear-button",
+      onPress: () => {
+        state == null ? void 0 : state.setInputValue("");
+        onClear == null ? void 0 : onClear();
+      },
       variant: "icon",
       className: (0, import_system17.cn)(
         "cursor-pointer appearance-none border-none p-0 pr-1",
@@ -836,14 +853,14 @@ var AutocompleteClearButton = ({ className }) => {
 
 // src/Autocomplete/Autocomplete.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var SearchInput = ({ onSubmit, ref }) => {
+var SearchInput = ({ onSubmit, onClear, ref }) => {
   const state = import_react16.default.useContext(import_react_aria_components11.ComboBoxStateContext);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     _Input,
     {
       ref,
       icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchIcon, {}),
-      action: (state == null ? void 0 : state.inputValue) !== "" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AutocompleteClearButton, {}) : void 0,
+      action: (state == null ? void 0 : state.inputValue) !== "" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AutocompleteClearButton, { onClear }) : void 0,
       onKeyDown: (e) => {
         if (e.key === "Enter" || e.key === "Escape") {
           e.preventDefault();
@@ -875,6 +892,7 @@ var _Autocomplete = (0, import_react15.forwardRef)(
     defaultValue,
     value,
     onChange,
+    onClear,
     onSubmit,
     disabled,
     error,
@@ -895,7 +913,7 @@ var _Autocomplete = (0, import_react15.forwardRef)(
       ...rest
     };
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(FieldBase, { as: import_react_aria_components11.ComboBox, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchInput, { onSubmit, ref }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchInput, { onSubmit, onClear, ref }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(_ListBox, { children }) })
     ] }) });
   }
@@ -934,7 +952,7 @@ var _ComboBox = (0, import_react17.forwardRef)(
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         _Input,
         {
-          action: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(_Button, { className: "absolute right-2 h-4 w-4 border-none bg-transparent p-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronDown, { className: "h-4 w-4" }) })
+          action: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(_Button, { className: "absolute right-2 size-4 border-none bg-transparent p-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronDown, { className: "size-4" }) })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(_ListBox, { children }) })
@@ -1283,9 +1301,9 @@ var _Headline = ({
       ...props,
       className: (0, import_system27.cn)(classNames2, "text-[--color]", import_system27.textAlign[align]),
       style: (0, import_system27.createVar)({
-        color: color && theme.colors && (0, import_system27.get)(
-          theme.colors,
-          color.replace("-", "."),
+        color: color && (0, import_system27.getColor)(
+          theme,
+          color,
           color
           /* fallback */
         )
@@ -1528,7 +1546,7 @@ var _DateSegment = ({ segment, ...props }) => {
             children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: isPlaceholder ? "" : (segment.type === "month" || segment.type === "day") && Number(segment.text) < 10 ? "0" + segment.text : text })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
       ] })
     }
   );
@@ -1602,14 +1620,14 @@ var import_date = require("@internationalized/date");
 var import_react24 = require("react");
 var import_react_aria_components25 = require("react-aria-components");
 var import_calendar = require("@react-aria/calendar");
-var import_i18n = require("@react-aria/i18n");
+var import_i18n2 = require("@react-aria/i18n");
 var import_system36 = require("@marigold/system");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function CalendarGridHeader(props) {
   const state = (0, import_react24.useContext)(import_react_aria_components25.CalendarStateContext);
   const { headerProps } = (0, import_calendar.useCalendarGrid)(props, state);
-  const { locale } = (0, import_i18n.useLocale)();
-  const dayFormatter = (0, import_i18n.useDateFormatter)({
+  const { locale } = (0, import_i18n2.useLocale)();
+  const dayFormatter = (0, import_i18n2.useDateFormatter)({
     weekday: "short",
     timeZone: state.timeZone
   });
@@ -1651,10 +1669,10 @@ var import_icons = require("@marigold/icons");
 var import_system38 = require("@marigold/system");
 
 // src/Calendar/useFormattedMonths.tsx
-var import_i18n2 = require("@react-aria/i18n");
+var import_i18n3 = require("@react-aria/i18n");
 function useFormattedMonths(timeZone, focusedDate) {
   let months = [];
-  let formatter = (0, import_i18n2.useDateFormatter)({
+  let formatter = (0, import_i18n3.useDateFormatter)({
     month: "long",
     timeZone
   });
@@ -1777,12 +1795,12 @@ var MonthListBox_default = MonthListBox;
 // src/Calendar/YearListBox.tsx
 var import_react27 = require("react");
 var import_react_aria_components30 = require("react-aria-components");
-var import_i18n3 = require("@react-aria/i18n");
+var import_i18n4 = require("@react-aria/i18n");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var YearListBox = ({ setSelectedDropdown }) => {
   const state = (0, import_react27.useContext)(import_react_aria_components30.CalendarStateContext);
   const years = [];
-  let formatter = (0, import_i18n3.useDateFormatter)({
+  let formatter = (0, import_i18n4.useDateFormatter)({
     year: "numeric",
     timeZone: state.timeZone
   });
@@ -1868,7 +1886,7 @@ var _Calendar = ({
     import_react_aria_components31.Calendar,
     {
       className: (0, import_system40.cn)(
-        "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4  shadow-[0_4px_4px_rgba(165,165,165,0.25)]",
+        "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4",
         classNames2.calendar
       ),
       ...props,
@@ -2438,7 +2456,6 @@ var import_system54 = require("@marigold/system");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var _Select = (0, import_react35.forwardRef)(
   ({
-    width,
     disabled,
     required,
     items,
@@ -2468,7 +2485,7 @@ var _Select = (0, import_react35.forwardRef)(
           ),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_aria_components43.SelectValue, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ChevronDown, { className: "h-4 w-4" })
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ChevronDown, { className: "size-4" })
           ]
         }
       ),
@@ -2618,7 +2635,7 @@ var _Switch = (0, import_react37.forwardRef)(
         className: (0, import_system58.cn)(
           import_system58.width[width],
           "group/switch",
-          "flex items-center justify-between gap-[1ch]",
+          "flex items-center gap-[1ch]",
           classNames2.container
         ),
         children: [
@@ -3065,9 +3082,9 @@ var Text2 = ({
         fontSize && import_system66.textSize[fontSize]
       ),
       style: (0, import_system66.createVar)({
-        color: color && theme.colors && (0, import_system66.get)(
-          theme.colors,
-          color.replace("-", "."),
+        color: color && (0, import_system66.getColor)(
+          theme,
+          color,
           color
           /* fallback */
         )
@@ -3560,6 +3577,7 @@ _Tabs.Item = _Tab;
   Form,
   Header,
   Headline,
+  I18nProvider,
   Image,
   Inline,
   Input,

package/dist/index.mjs

@@ -219,7 +219,15 @@ var Accordion = ({ children, ...props }) => {
     selectionMode: "single",
     ...ownProps
   });
-  const { accordionProps } = useAccordion({ ...ownProps }, state, ref);
+  const { accordionProps } = useAccordion(
+    /**
+     * Disable "cmd+a" (open all) hotkey for now, since it will not work
+     * with forms inside the accordion. (see DSTSUP-22)
+     */
+    { ...ownProps, disallowSelectAll: true },
+    state,
+    ref
+  );
   delete accordionProps.onKeyDownCapture;
   return /* @__PURE__ */ jsx4("div", { ...accordionProps, ref, children: [...state.collection].map((item) => /* @__PURE__ */ jsx4(
     AccordionItem,
@@ -577,6 +585,7 @@ import { cn as cn10, useClassNames as useClassNames7 } from "@marigold/system";
 
 // src/Provider/index.ts
 import { useTheme as useTheme2, ThemeProvider as ThemeProvider2 } from "@marigold/system";
+import { I18nProvider } from "@react-aria/i18n";
 
 // src/Provider/MarigoldProvider.tsx
 import { OverlayProvider } from "@react-aria/overlays";
@@ -645,7 +654,7 @@ var _Popover = forwardRef6(
       component: "Popover",
       variant: placement,
       // Make Popover as wide as trigger element
-      className: "w-[--trigger-width]"
+      className: "min-w-[--trigger-width]"
     });
     const isSmallScreen = useSmallScreen();
     const portal = usePortalContainer();
@@ -714,13 +723,20 @@ var _Button = forwardRef7(
 
 // src/Autocomplete/ClearButton.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
-var AutocompleteClearButton = ({ className }) => {
+var AutocompleteClearButton = ({
+  className,
+  onClear
+}) => {
   let state = React.useContext(ComboBoxStateContext);
   return /* @__PURE__ */ jsx19(
     _Button,
     {
       "aria-label": "Clear",
-      onPress: () => state == null ? void 0 : state.setInputValue(""),
+      "data-testid": "clear-button",
+      onPress: () => {
+        state == null ? void 0 : state.setInputValue("");
+        onClear == null ? void 0 : onClear();
+      },
       variant: "icon",
       className: cn13(
         "cursor-pointer appearance-none border-none p-0 pr-1",
@@ -743,14 +759,14 @@ var AutocompleteClearButton = ({ className }) => {
 
 // src/Autocomplete/Autocomplete.tsx
 import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
-var SearchInput = ({ onSubmit, ref }) => {
+var SearchInput = ({ onSubmit, onClear, ref }) => {
   const state = React2.useContext(ComboBoxStateContext2);
   return /* @__PURE__ */ jsx20(
     _Input,
     {
       ref,
       icon: /* @__PURE__ */ jsx20(SearchIcon, {}),
-      action: (state == null ? void 0 : state.inputValue) !== "" ? /* @__PURE__ */ jsx20(AutocompleteClearButton, {}) : void 0,
+      action: (state == null ? void 0 : state.inputValue) !== "" ? /* @__PURE__ */ jsx20(AutocompleteClearButton, { onClear }) : void 0,
       onKeyDown: (e) => {
         if (e.key === "Enter" || e.key === "Escape") {
           e.preventDefault();
@@ -782,6 +798,7 @@ var _Autocomplete = forwardRef8(
     defaultValue,
     value,
     onChange,
+    onClear,
     onSubmit,
     disabled,
     error,
@@ -802,7 +819,7 @@ var _Autocomplete = forwardRef8(
       ...rest
     };
     return /* @__PURE__ */ jsx20(Fragment2, { children: /* @__PURE__ */ jsxs8(FieldBase, { as: ComboBox, ...props, children: [
-      /* @__PURE__ */ jsx20(SearchInput, { onSubmit, ref }),
+      /* @__PURE__ */ jsx20(SearchInput, { onSubmit, onClear, ref }),
       /* @__PURE__ */ jsx20(_Popover, { children: /* @__PURE__ */ jsx20(_ListBox, { children }) })
     ] }) });
   }
@@ -841,7 +858,7 @@ var _ComboBox = forwardRef9(
       /* @__PURE__ */ jsx21(
         _Input,
         {
-          action: /* @__PURE__ */ jsx21(_Button, { className: "absolute right-2 h-4 w-4 border-none bg-transparent p-0", children: /* @__PURE__ */ jsx21(ChevronDown, { className: "h-4 w-4" }) })
+          action: /* @__PURE__ */ jsx21(_Button, { className: "absolute right-2 size-4 border-none bg-transparent p-0", children: /* @__PURE__ */ jsx21(ChevronDown, { className: "size-4" }) })
         }
       ),
       /* @__PURE__ */ jsx21(_Popover, { children: /* @__PURE__ */ jsx21(_ListBox, { children }) })
@@ -1186,7 +1203,7 @@ import { Heading } from "react-aria-components";
 import {
   cn as cn20,
   createVar as createVar8,
-  get,
+  getColor,
   textAlign,
   useClassNames as useClassNames15,
   useTheme as useTheme3
@@ -1214,9 +1231,9 @@ var _Headline = ({
       ...props,
       className: cn20(classNames2, "text-[--color]", textAlign[align]),
       style: createVar8({
-        color: color && theme.colors && get(
-          theme.colors,
-          color.replace("-", "."),
+        color: color && getColor(
+          theme,
+          color,
           color
           /* fallback */
         )
@@ -1468,7 +1485,7 @@ var _DateSegment = ({ segment, ...props }) => {
             children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
           }
         ),
-        /* @__PURE__ */ jsx40("span", { children: isPlaceholder ? "" : (segment.type === "month" || segment.type === "day") && Number(segment.text) < 10 ? "0" + segment.text : text })
+        /* @__PURE__ */ jsx40("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
       ] })
     }
   );
@@ -1816,7 +1833,7 @@ var _Calendar = ({
     Calendar,
     {
       className: cn28(
-        "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4  shadow-[0_4px_4px_rgba(165,165,165,0.25)]",
+        "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4",
         classNames2.calendar
       ),
       ...props,
@@ -2397,7 +2414,6 @@ import { cn as cn35, useClassNames as useClassNames38 } from "@marigold/system";
 import { jsx as jsx65, jsxs as jsxs26 } from "react/jsx-runtime";
 var _Select = forwardRef17(
   ({
-    width,
     disabled,
     required,
     items,
@@ -2427,7 +2443,7 @@ var _Select = forwardRef17(
           ),
           children: [
             /* @__PURE__ */ jsx65(SelectValue, {}),
-            /* @__PURE__ */ jsx65(ChevronDown, { className: "h-4 w-4" })
+            /* @__PURE__ */ jsx65(ChevronDown, { className: "size-4" })
           ]
         }
       ),
@@ -2594,7 +2610,7 @@ var _Switch = forwardRef19(
         className: cn39(
           twWidth4[width],
           "group/switch",
-          "flex items-center justify-between gap-[1ch]",
+          "flex items-center gap-[1ch]",
           classNames2.container
         ),
         children: [
@@ -3026,7 +3042,7 @@ import {
   createVar as createVar10,
   cursorStyle,
   fontWeight,
-  get as get2,
+  getColor as getColor2,
   textAlign as textAlign2,
   textSize,
   textStyle,
@@ -3066,9 +3082,9 @@ var Text2 = ({
         fontSize && textSize[fontSize]
       ),
       style: createVar10({
-        color: color && theme.colors && get2(
-          theme.colors,
-          color.replace("-", "."),
+        color: color && getColor2(
+          theme,
+          color,
           color
           /* fallback */
         )
@@ -3560,6 +3576,7 @@ export {
   Form,
   _Header as Header,
   _Headline as Headline,
+  I18nProvider,
   Image,
   Inline,
   _Input as Input,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "7.2.0",
+  "version": "7.3.1",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -42,8 +42,8 @@
     "@react-types/shared": "3.22.0",
     "@react-types/table": "3.9.2",
     "react-aria-components": "1.0.1",
-    "@marigold/icons": "1.2.34",
-    "@marigold/system": "7.2.0",
+    "@marigold/icons": "1.2.36",
+    "@marigold/system": "7.3.1",
     "@marigold/types": "1.1.0"
   },
   "peerDependencies": {