npm - @smwb/ui-solid - Versions diffs - 0.12.1 → 0.14.0 - Mend

@smwb/ui-solid 0.12.1 → 0.14.0

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.

Files changed (1137) hide show

package/dist/source/components/inputs/datePicker/datePickerActionLabel.jsx CHANGED Viewed

@@ -16,6 +16,9 @@ function DatePickerActionLabel(props) {
   const switchClasses = () => cn("smwb-date-picker__switch", {
     "smwb-date-picker__switch--hidden": local.hiddenSwitches
   });
+  const onLabelClick = () => {
+    if (!local.disabled) local.onLabelClick?.();
+  };
   return <div class="smwb-date-picker__action">
       <div class={switchClasses()}>
         <DatePickerIconButton size="small" onClick={local.disabled ? void 0 : local.onLeftIconClick}>
@@ -28,7 +31,7 @@ function DatePickerActionLabel(props) {
       "smwb-date-picker__action-label--active": local.active
     })}
     data-testid={local.dataToggleId}
-    onClick={local.disabled ? void 0 : local.onLabelClick}
+    onClick={onLabelClick}
   >
         <span class="smwb-date-picker__action-text">{local.label}</span>
         <Icon name="arrow_drop_down" weight={500} size={20} />

package/dist/source/components/inputs/datePicker/datePickerActionLabel.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePickerActionLabel.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { DatePickerIconButton } from \"./datePickerIconButton\";\nimport { Icon } from \"../../base/icon\";\n\nexport interface ActionLabelProps {\n label: string;\n onLeftIconClick?: (() => void) \| undefined;\n onRightIconClick?: (() => void) \| undefined;\n onLabelClick?: (() => void) \| undefined;\n disabled?: boolean \| undefined;\n active?: boolean \| undefined;\n hiddenSwitches?: boolean \| undefined;\n dataToggleId?: string \| undefined;\n}\n\nexport function DatePickerActionLabel(props: ActionLabelProps): JSX.Element {\n const [local] = splitProps(props, [\n \"label\",\n \"onLeftIconClick\",\n \"onRightIconClick\",\n \"onLabelClick\",\n \"disabled\",\n \"active\",\n \"hiddenSwitches\",\n \"dataToggleId\",\n ]);\n\n const switchClasses = (): string =>\n cn(\"smwb-date-picker__switch\", {\n \"smwb-date-picker__switch--hidden\": local.hiddenSwitches,\n });\n\n return (\n <div class=\"smwb-date-picker__action\">\n <div class={switchClasses()}>\n <DatePickerIconButton size=\"small\" onClick={local.disabled ? undefined : local.onLeftIconClick}>\n <Icon name=\"keyboard_arrow_left\" weight={500} size={24} />\n </DatePickerIconButton>\n </div>\n <div\n class={cn(\"smwb-date-picker__action-label\", {\n \"smwb-date-picker__action-label--disabled\": local.disabled,\n \"smwb-date-picker__action-label--active\": local.active,\n })}\n data-testid={local.dataToggleId}\n onClick={~~local.disabled ? undefined : local.~~onLabelClick}\n >\n <span class=\"smwb-date-picker__action-text\">{local.label}</span>\n <Icon name=\"arrow_drop_down\" weight={500} size={20} />\n </div>\n <div class={switchClasses()}>\n <DatePickerIconButton size=\"small\" onClick={local.disabled ? undefined : local.onRightIconClick}>\n <Icon name=\"keyboard_arrow_right\" weight={500} size={24} />\n </DatePickerIconButton>\n </div>\n </div>\n );\n}\n\nexport default DatePickerActionLabel;\n"],"mappings":"AAAA,SAAmB,kBAAkB;AACrC,OAAO,QAAQ;AACf,SAAS,4BAA4B;AACrC,SAAS,YAAY;AAad,SAAS,sBAAsB,OAAsC;AAC1E,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,MACpB,GAAG,4BAA4B;AAAA,IAC7B,oCAAoC,MAAM;AAAA,EAC5C,CAAC;~~AAEH~~,SACE,CAAC,IAAI,MAAM,2BAA2B;AAAA,MACpC,CAAC,IAAI,OAAO,cAAc,GAAG;AAAA,QAC3B,CAAC,qBAAqB,KAAK,QAAQ,SAAS,MAAM,WAAW,SAAY,MAAM,iBAAiB;AAAA,UAC9F,CAAC,KAAK,KAAK,sBAAsB,QAAQ,KAAK,MAAM,IAAI,EAAE;AAAA,QAC5D,EAFC,qBAEsB;AAAA,MACzB,EAJC,IAIK;AAAA,MACN,CAAC;AAAA,IACC,OAAO,GAAG,kCAAkC;AAAA,MAC1C,4CAA4C,MAAM;AAAA,MAClD,0CAA0C,MAAM;AAAA,IAClD,CAAC;AAAA,IACD,aAAa,MAAM;AAAA,IACnB,SAAS~~,MAAM,WAAW,SAAY,MAAM~~;AAAA,~~GAC7C~~;AAAA,QACC,CAAC,KAAK,MAAM,iCAAiC,MAAM,MAAM,EAAxD,KAA+D;AAAA,QAChE,CAAC,KAAK,KAAK,kBAAkB,QAAQ,KAAK,MAAM,IAAI,EAAE;AAAA,MACxD,EAVC,IAUK;AAAA,MACN,CAAC,IAAI,OAAO,cAAc,GAAG;AAAA,QAC3B,CAAC,qBAAqB,KAAK,QAAQ,SAAS,MAAM,WAAW,SAAY,MAAM,kBAAkB;AAAA,UAC/F,CAAC,KAAK,KAAK,uBAAuB,QAAQ,KAAK,MAAM,IAAI,EAAE;AAAA,QAC7D,EAFC,qBAEsB;AAAA,MACzB,EAJC,IAIK;AAAA,IACR,EAtBC;AAwBL;AAEA,IAAO,gCAAQ;","names":[],"file":"datePickerActionLabel.jsx"}
1	+ {"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePickerActionLabel.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { DatePickerIconButton } from \"./datePickerIconButton\";\nimport { Icon } from \"../../base/icon\";\n\nexport interface ActionLabelProps {\n label: string;\n onLeftIconClick?: (() => void) \| undefined;\n onRightIconClick?: (() => void) \| undefined;\n onLabelClick?: (() => void) \| undefined;\n disabled?: boolean \| undefined;\n active?: boolean \| undefined;\n hiddenSwitches?: boolean \| undefined;\n dataToggleId?: string \| undefined;\n}\n\nexport function DatePickerActionLabel(props: ActionLabelProps): JSX.Element {\n const [local] = splitProps(props, [\n \"label\",\n \"onLeftIconClick\",\n \"onRightIconClick\",\n \"onLabelClick\",\n \"disabled\",\n \"active\",\n \"hiddenSwitches\",\n \"dataToggleId\",\n ]);\n\n const switchClasses = (): string =>\n cn(\"smwb-date-picker__switch\", {\n \"smwb-date-picker__switch--hidden\": local.hiddenSwitches,\n });\n\n // Solid binds event handlers once, so the label's handler is always attached\n // and checks `disabled` itself: the header disables one label while the other\n // one's view is open. (The icon buttons spread their props, which follow.)\n const onLabelClick = (): void => {\n if (!local.disabled) local.onLabelClick?.();\n };\n\n return (\n <div class=\"smwb-date-picker__action\">\n <div class={switchClasses()}>\n <DatePickerIconButton size=\"small\" onClick={local.disabled ? undefined : local.onLeftIconClick}>\n <Icon name=\"keyboard_arrow_left\" weight={500} size={24} />\n </DatePickerIconButton>\n </div>\n <div\n class={cn(\"smwb-date-picker__action-label\", {\n \"smwb-date-picker__action-label--disabled\": local.disabled,\n \"smwb-date-picker__action-label--active\": local.active,\n })}\n data-testid={local.dataToggleId}\n onClick={onLabelClick}\n >\n <span class=\"smwb-date-picker__action-text\">{local.label}</span>\n <Icon name=\"arrow_drop_down\" weight={500} size={20} />\n </div>\n <div class={switchClasses()}>\n <DatePickerIconButton size=\"small\" onClick={local.disabled ? undefined : local.onRightIconClick}>\n <Icon name=\"keyboard_arrow_right\" weight={500} size={24} />\n </DatePickerIconButton>\n </div>\n </div>\n );\n}\n\nexport default DatePickerActionLabel;\n"],"mappings":"AAAA,SAAmB,kBAAkB;AACrC,OAAO,QAAQ;AACf,SAAS,4BAA4B;AACrC,SAAS,YAAY;AAad,SAAS,sBAAsB,OAAsC;AAC1E,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,MACpB,GAAG,4BAA4B;AAAA,IAC7B,oCAAoC,MAAM;AAAA,EAC5C,CAAC;AAKH,QAAM,eAAe,MAAY;AAC/B,QAAI,CAAC,MAAM,SAAU,OAAM,eAAe;AAAA,EAC5C;AAEA,SACE,CAAC,IAAI,MAAM,2BAA2B;AAAA,MACpC,CAAC,IAAI,OAAO,cAAc,GAAG;AAAA,QAC3B,CAAC,qBAAqB,KAAK,QAAQ,SAAS,MAAM,WAAW,SAAY,MAAM,iBAAiB;AAAA,UAC9F,CAAC,KAAK,KAAK,sBAAsB,QAAQ,KAAK,MAAM,IAAI,EAAE;AAAA,QAC5D,EAFC,qBAEsB;AAAA,MACzB,EAJC,IAIK;AAAA,MACN,CAAC;AAAA,IACC,OAAO,GAAG,kCAAkC;AAAA,MAC1C,4CAA4C,MAAM;AAAA,MAClD,0CAA0C,MAAM;AAAA,IAClD,CAAC;AAAA,IACD,aAAa,MAAM;AAAA,IACnB,SAAS;AAAA,GACV;AAAA,QACC,CAAC,KAAK,MAAM,iCAAiC,MAAM,MAAM,EAAxD,KAA+D;AAAA,QAChE,CAAC,KAAK,KAAK,kBAAkB,QAAQ,KAAK,MAAM,IAAI,EAAE;AAAA,MACxD,EAVC,IAUK;AAAA,MACN,CAAC,IAAI,OAAO,cAAc,GAAG;AAAA,QAC3B,CAAC,qBAAqB,KAAK,QAAQ,SAAS,MAAM,WAAW,SAAY,MAAM,kBAAkB;AAAA,UAC/F,CAAC,KAAK,KAAK,uBAAuB,QAAQ,KAAK,MAAM,IAAI,EAAE;AAAA,QAC7D,EAFC,qBAEsB;AAAA,MACzB,EAJC,IAIK;AAAA,IACR,EAtBC;AAwBL;AAEA,IAAO,gCAAQ;","names":[],"file":"datePickerActionLabel.jsx"}

package/dist/source/components/inputs/datePicker/datePickerDay.jsx CHANGED Viewed

@@ -1,8 +1,10 @@
-import { Show, splitProps } from "solid-js";
+import { Show, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Ripple } from "../../base/ripple";
+import { callHandler } from "../../../primitives/callHandler";
 function DatePickerDay(props) {
-  const [local, rest] = splitProps(props, [
+  const merged = mergeProps({ type: "button" }, props);
+  const [local, rest] = splitProps(merged, [
     "class",
     "children",
     "onChange",
@@ -12,13 +14,18 @@ function DatePickerDay(props) {
     "outside",
     "disabled",
     "inRange",
-    "day"
+    "day",
+    // The day sets these on its root too; its own handlers call the caller's first.
+    "onPointerDown",
+    "onClick"
   ]);
   let rippleActions;
   const onPointerDown = (event) => {
+    callHandler(local.onPointerDown, event);
     if (!local.disabled) rippleActions?.onRipple(event);
   };
-  const onClick = () => {
+  const onClick = (event) => {
+    callHandler(local.onClick, event);
     if (!local.disabled) local.onChange?.(void 0, local.day);
   };
   const classes = () => cn("smwb-date-picker__day", local.class, {
@@ -29,14 +36,7 @@ function DatePickerDay(props) {
     "smwb-date-picker__day--in-range": !local.disabled && local.inRange
   });
   return <Show when={!local.hidden} fallback={<span class="smwb-date-picker__day-hidden" />}>
-      <button
-    {...rest}
-    class={classes()}
-    type="button"
-    onPointerDown={onPointerDown}
-    onClick={onClick}
-    disabled={local.disabled}
-  >
+      <button {...rest} class={classes()} onPointerDown={onPointerDown} onClick={onClick} disabled={local.disabled}>
         {local.children}
         <Show when={!local.disabled}>
           <Ripple actionRef={(actions) => rippleActions = actions} center />

package/dist/source/components/inputs/datePicker/datePickerDay.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePickerDay.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\n\nexport interface DatePickerDayProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n active?: boolean \| undefined;\n current?: boolean \| undefined;\n hidden?: boolean \| undefined;\n outside?: boolean \| undefined;\n disabled?: boolean \| undefined;\n inRange?: boolean \| undefined;\n day: Date;\n onChange?: ((event?: Event, date?: Date) => void) \| undefined;\n}\n\nexport function DatePickerDay(props: ParentProps<DatePickerDayProps>): JSX.Element {\n const [local, rest] = splitProps(~~props~~, [\n \"class\",\n \"children\",\n \"onChange\",\n \"active\",\n \"current\",\n \"hidden\",\n \"outside\",\n \"disabled\",\n \"inRange\",\n \"day\",\n ]);\n\n let rippleActions: RippleActionsRef \| undefined;\n\n const onPointerDown = (event~~: PointerEvent~~): ~~void~~ => {\n if (!local.disabled) rippleActions?.onRipple(event);\n };\n\n const onClick = (): ~~void~~ => {\n if (!local.disabled) local.onChange?.(undefined, local.day);\n };\n\n const classes = (): string =>\n cn(\"smwb-date-picker__day\", local.class, {\n \"smwb-date-picker__day--active\": !local.disabled && local.active,\n \"smwb-date-picker__day--current\": local.current && !local.active,\n \"smwb-date-picker__day--outside\": !local.disabled && local.outside,\n \"smwb-date-picker__day--disabled\": local.disabled,\n \"smwb-date-picker__day--in-range\": !local.disabled && local.inRange,\n });\n\n return (\n <Show when={!local.hidden} fallback={<span class=\"smwb-date-picker__day-hidden\" />}>\n <button\n {...rest}\n class={classes()}~~\n type=\"button\"\n~~ onPointerDown={onPointerDown}\n onClick={onClick}\n disabled={local.disabled}\n >\n {local.children}\n <Show when={!local.disabled}>\n <Ripple actionRef={(actions) => (rippleActions = actions)} center />\n </Show>\n </button>\n </Show>\n );\n}\n\nexport default DatePickerDay;\n"],"mappings":"AAAA,SAAqC,MAAM,kBAAkB;~~AAC7D~~,OAAO,QAAQ;AACf,SAAS,cAAqC;~~AAavC~~,SAAS,cAAc,OAAqD;~~AACjF~~,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,~~OAAO~~;AAAA,~~IACtC~~;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AAEJ,QAAM,~~gBAAgB~~,CAAC,~~UAA8B~~;~~AACnD~~,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,QAAM,UAAU,~~MAAY~~;~~AAC1B~~,QAAI,CAAC,MAAM,SAAU,OAAM,WAAW,QAAW,MAAM,GAAG;AAAA,EAC5D;AAEA,QAAM,UAAU,MACd,GAAG,yBAAyB,MAAM,OAAO;AAAA,IACvC,iCAAiC,CAAC,MAAM,YAAY,MAAM;AAAA,IAC1D,kCAAkC,MAAM,WAAW,CAAC,MAAM;AAAA,IAC1D,kCAAkC,CAAC,MAAM,YAAY,MAAM;AAAA,IAC3D,mCAAmC,MAAM;AAAA,IACzC,mCAAmC,CAAC,MAAM,YAAY,MAAM;AAAA,EAC9D,CAAC;AAEH,SACE,CAAC,KAAK,MAAM,CAAC,MAAM,QAAQ,UAAU,CAAC,KAAK,MAAM,+BAA+B,IAAI;AAAA,MAClF,CAAC~~;AAAA~~,~~QACK;AAAA~~,~~IACJ~~,OAAO,QAAQ~~;AAAA~~,~~IACf~~,~~KAAK;AAAA~~,~~IACL,~~eAAe~~;AAAA~~,~~IACf~~,SAAS~~;AAAA~~,~~IACT,~~UAAU,MAAM~~;AAAA~~,~~GACjB~~;AAAA,~~SACE~~,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU;AAAA,UAC3B,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,OAAO,EAAE;AAAA,QACtE,EAFC,KAEM;AAAA,MACT,~~EAZC~~,~~OAYQ~~;AAAA,IACX,~~EAdC~~;~~AAgBL~~;AAEA,IAAO,wBAAQ;","names":[],"file":"datePickerDay.jsx"}
1	+ {"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePickerDay.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface DatePickerDayProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n active?: boolean \| undefined;\n current?: boolean \| undefined;\n hidden?: boolean \| undefined;\n outside?: boolean \| undefined;\n disabled?: boolean \| undefined;\n inRange?: boolean \| undefined;\n day: Date;\n onChange?: ((event?: Event, date?: Date) => void) \| undefined;\n}\n\nexport function DatePickerDay(props: ParentProps<DatePickerDayProps>): JSX.Element {\n // `type` is a default: the caller's wins.\n const merged = mergeProps({ type: \"button\" as const }, props);\n const [local, rest] = splitProps(merged, [\n \"class\",\n \"children\",\n \"onChange\",\n \"active\",\n \"current\",\n \"hidden\",\n \"outside\",\n \"disabled\",\n \"inRange\",\n \"day\",\n // The day sets these on its root too; its own handlers call the caller's first.\n \"onPointerDown\",\n \"onClick\",\n ]);\n\n let rippleActions: RippleActionsRef \| undefined;\n\n const onPointerDown: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {\n callHandler(local.onPointerDown, event);\n if (!local.disabled) rippleActions?.onRipple(event);\n };\n\n const onClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n callHandler(local.onClick, event);\n if (!local.disabled) local.onChange?.(undefined, local.day);\n };\n\n const classes = (): string =>\n cn(\"smwb-date-picker__day\", local.class, {\n \"smwb-date-picker__day--active\": !local.disabled && local.active,\n \"smwb-date-picker__day--current\": local.current && !local.active,\n \"smwb-date-picker__day--outside\": !local.disabled && local.outside,\n \"smwb-date-picker__day--disabled\": local.disabled,\n \"smwb-date-picker__day--in-range\": !local.disabled && local.inRange,\n });\n\n return (\n <Show when={!local.hidden} fallback={<span class=\"smwb-date-picker__day-hidden\" />}>\n <button {...rest} class={classes()} onPointerDown={onPointerDown} onClick={onClick} disabled={local.disabled}>\n {local.children}\n <Show when={!local.disabled}>\n <Ripple actionRef={(actions) => (rippleActions = actions)} center />\n </Show>\n </button>\n </Show>\n );\n}\n\nexport default DatePickerDay;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,mBAAmB;AAarB,SAAS,cAAc,OAAqD;AAEjF,QAAM,SAAS,WAAW,EAAE,MAAM,SAAkB,GAAG,KAAK;AAC5D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AAEJ,QAAM,gBAAmE,CAAC,UAAU;AAClF,gBAAY,MAAM,eAAe,KAAK;AACtC,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,QAAM,UAA2D,CAAC,UAAU;AAC1E,gBAAY,MAAM,SAAS,KAAK;AAChC,QAAI,CAAC,MAAM,SAAU,OAAM,WAAW,QAAW,MAAM,GAAG;AAAA,EAC5D;AAEA,QAAM,UAAU,MACd,GAAG,yBAAyB,MAAM,OAAO;AAAA,IACvC,iCAAiC,CAAC,MAAM,YAAY,MAAM;AAAA,IAC1D,kCAAkC,MAAM,WAAW,CAAC,MAAM;AAAA,IAC1D,kCAAkC,CAAC,MAAM,YAAY,MAAM;AAAA,IAC3D,mCAAmC,MAAM;AAAA,IACzC,mCAAmC,CAAC,MAAM,YAAY,MAAM;AAAA,EAC9D,CAAC;AAEH,SACE,CAAC,KAAK,MAAM,CAAC,MAAM,QAAQ,UAAU,CAAC,KAAK,MAAM,+BAA+B,IAAI;AAAA,MAClF,CAAC,WAAW,MAAM,OAAO,QAAQ,GAAG,eAAe,eAAe,SAAS,SAAS,UAAU,MAAM,UAAU;AAAA,SAC3G,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU;AAAA,UAC3B,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,OAAO,EAAE;AAAA,QACtE,EAFC,KAEM;AAAA,MACT,EALC,OAKQ;AAAA,IACX,EAPC;AASL;AAEA,IAAO,wBAAQ;","names":[],"file":"datePickerDay.jsx"}

package/dist/source/components/inputs/datePicker/datePickerIconButton.jsx CHANGED Viewed

@@ -2,18 +2,28 @@ import { Show, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Ripple } from "../../base/ripple";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { callHandler } from "../../../primitives/callHandler";
 function DatePickerIconButton(props) {
-  const merged = mergeProps({ size: "medium" }, props);
-  const [local, rest] = splitProps(merged, ["class", "children", "disabled", "size", "edge", "ref"]);
+  const merged = mergeProps({ size: "medium", type: "button" }, props);
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "children",
+    "disabled",
+    "size",
+    "edge",
+    "ref",
+    // The button sets this on its root too; its own handler calls the caller's first.
+    "onPointerDown"
+  ]);
   let rippleActions;
   const onPointerDown = (event) => {
+    callHandler(local.onPointerDown, event);
     if (!local.disabled) rippleActions?.onRipple(event);
   };
   return <button
     {...rest}
     ref={mergeRefs(local.ref)}
     onPointerDown={onPointerDown}
-    type="button"
     class={cn("smwb-date-picker__icon-button", local.class, {
       "smwb-date-picker__icon-button--small": local.size === "small",
       "smwb-date-picker__icon-button--edge-start": local.edge === "start",

package/dist/source/components/inputs/datePicker/datePickerIconButton.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePickerIconButton.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type DataPickerIconButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {\n size?: \"medium\" \| \"small\";\n edge?: \"start\" \| \"end\";\n ref?: Ref<HTMLButtonElement>;\n};\n\nexport function DatePickerIconButton(props: ParentProps<DataPickerIconButtonProps>): JSX.Element {\n const merged = mergeProps({ size: \"medium\" as const }, props);\n const [local, rest] = splitProps(merged, [\"class\", \"children\", \"disabled\", \"size\", \"edge\", \"ref\"]);\n let rippleActions: RippleActionsRef \| undefined;\n\n const onPointerDown = (event~~: PointerEvent~~): ~~void~~ => {\n if (!local.disabled) rippleActions?.onRipple(event);\n };\n\n return (\n <button\n {...rest}\n ref={mergeRefs(local.ref)}\n onPointerDown={onPointerDown}\n ~~type=\"button\"\n~~ class={cn(\"smwb-date-picker__icon-button\", local.class, {\n \"smwb-date-picker__icon-button--small\": local.size === \"small\",\n \"smwb-date-picker__icon-button--edge-start\": local.edge === \"start\",\n \"smwb-date-picker__icon-button--edge-end\": local.edge === \"end\",\n \"smwb-date-picker__icon-button--disabled\": local.disabled,\n })}\n disabled={local.disabled}\n >\n {local.children}\n <Show when={!local.disabled}>\n <Ripple actionRef={(actions) => (rippleActions = actions)} center />\n </Show>\n </button>\n );\n}\n\nexport default DatePickerIconButton;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;~~AAQ7B~~,SAAS,qBAAqB,OAA4D;~~AAC~~/F,QAAM,SAAS,WAAW,EAAE,MAAM,SAAkB,GAAG,KAAK;~~AAC5D~~,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,~~CAAC~~,~~SAAS~~,~~YAAY~~,~~YAAY~~,~~QAAQ~~,~~QAAQ~~,~~KAAK~~,CAAC;~~AACjG~~,MAAI;AAEJ,QAAM,~~gBAAgB~~,CAAC,~~UAA8B~~;~~AACnD~~,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,eAAe;AAAA,IACf,~~KAAK;AAAA,IACL,~~OAAO,GAAG,iCAAiC,MAAM,OAAO;AAAA,MACtD,wCAAwC,MAAM,SAAS;AAAA,MACvD,6CAA6C,MAAM,SAAS;AAAA,MAC5D,2CAA2C,MAAM,SAAS;AAAA,MAC1D,2CAA2C,MAAM;AAAA,IACnD,CAAC;AAAA,IACD,UAAU,MAAM;AAAA,GACjB;AAAA,OACE,MAAM,SAAS;AAAA,MAChB,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU;AAAA,QAC3B,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,OAAO,EAAE;AAAA,MACtE,EAFC,KAEM;AAAA,IACT,~~EAjBC~~;~~AAmBL~~;AAEA,IAAO,+BAAQ;","names":[],"file":"datePickerIconButton.jsx"}
1	+ {"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePickerIconButton.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type DataPickerIconButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {\n size?: \"medium\" \| \"small\";\n edge?: \"start\" \| \"end\";\n ref?: Ref<HTMLButtonElement>;\n};\n\nexport function DatePickerIconButton(props: ParentProps<DataPickerIconButtonProps>): JSX.Element {\n // `type` is a default: the caller's wins.\n const merged = mergeProps({ size: \"medium\" as const, type: \"button\" as const }, props);\n const [local, rest] = splitProps(merged, [\n \"class\",\n \"children\",\n \"disabled\",\n \"size\",\n \"edge\",\n \"ref\",\n // The button sets this on its root too; its own handler calls the caller's first.\n \"onPointerDown\",\n ]);\n let rippleActions: RippleActionsRef \| undefined;\n\n const onPointerDown: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {\n callHandler(local.onPointerDown, event);\n if (!local.disabled) rippleActions?.onRipple(event);\n };\n\n return (\n <button\n {...rest}\n ref={mergeRefs(local.ref)}\n onPointerDown={onPointerDown}\n class={cn(\"smwb-date-picker__icon-button\", local.class, {\n \"smwb-date-picker__icon-button--small\": local.size === \"small\",\n \"smwb-date-picker__icon-button--edge-start\": local.edge === \"start\",\n \"smwb-date-picker__icon-button--edge-end\": local.edge === \"end\",\n \"smwb-date-picker__icon-button--disabled\": local.disabled,\n })}\n disabled={local.disabled}\n >\n {local.children}\n <Show when={!local.disabled}>\n <Ripple actionRef={(actions) => (rippleActions = actions)} center />\n </Show>\n </button>\n );\n}\n\nexport default DatePickerIconButton;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAQrB,SAAS,qBAAqB,OAA4D;AAE/F,QAAM,SAAS,WAAW,EAAE,MAAM,UAAmB,MAAM,SAAkB,GAAG,KAAK;AACrF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EACF,CAAC;AACD,MAAI;AAEJ,QAAM,gBAAmE,CAAC,UAAU;AAClF,gBAAY,MAAM,eAAe,KAAK;AACtC,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,eAAe;AAAA,IACf,OAAO,GAAG,iCAAiC,MAAM,OAAO;AAAA,MACtD,wCAAwC,MAAM,SAAS;AAAA,MACvD,6CAA6C,MAAM,SAAS;AAAA,MAC5D,2CAA2C,MAAM,SAAS;AAAA,MAC1D,2CAA2C,MAAM;AAAA,IACnD,CAAC;AAAA,IACD,UAAU,MAAM;AAAA,GACjB;AAAA,OACE,MAAM,SAAS;AAAA,MAChB,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU;AAAA,QAC3B,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,OAAO,EAAE;AAAA,MACtE,EAFC,KAEM;AAAA,IACT,EAhBC;AAkBL;AAEA,IAAO,+BAAQ;","names":[],"file":"datePickerIconButton.jsx"}

package/dist/source/components/inputs/dateTimePicker/dateTimePicker.jsx CHANGED Viewed

@@ -2,6 +2,7 @@ import { Show, createEffect, createMemo, createSignal, onCleanup, splitProps } f
 import { Portal, isServer } from "solid-js/web";
 import { buildFloatingMiddleware, resolvePlacement } from "../../../utils/floating";
 import { createFloating } from "../../../primitives/createFloating";
+import { isTopOverlayLayer } from "../../../primitives/overlayLayer";
 import { ClickAwayListener } from "../../clickAwayListener";
 import { DataPickerHeader } from "../datePicker/dataPickerHeader";
 import { DataPickerDays } from "../datePicker/dataPickerDays";
@@ -121,6 +122,18 @@ function DateTimePicker(props) {
     if (raf !== void 0) cancelAnimationFrame(raf);
     if (timer !== void 0) clearTimeout(timer);
   });
+  createEffect(() => {
+    if (!shouldOpen()) return;
+    const onKeyDown = (event) => {
+      const panel = popupEl;
+      if (event.key !== "Escape" || !panel || !isTopOverlayLayer(panel)) return;
+      setIsOpen(false);
+      const active = document.activeElement;
+      if (!active || active === document.body || panel.contains(active)) anchorEl?.focus();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    onCleanup(() => document.removeEventListener("keydown", onKeyDown));
+  });
   const view = () => {
     switch (openView()) {
       case OpenView.months:

package/dist/source/components/inputs/dateTimePicker/dateTimePicker.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/inputs/dateTimePicker/dateTimePicker.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, createMemo, createSignal, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport { buildFloatingMiddleware, type Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport type { TextFieldProps } from \"../textField\";\nimport { DataPickerHeader } from \"../datePicker/dataPickerHeader\";\nimport { DataPickerDays } from \"../datePicker/dataPickerDays\";\nimport { DatePickerList } from \"../datePicker/datePickerList\";\nimport { type WeekStart, getMonths, getYears, isValidDate, setMonth, setYear } from \"../datePicker/dateUtils\";\nimport { OpenView } from \"../datePicker/openView\";\nimport { TimePickerColumns } from \"../timePicker/timePickerColumns\";\nimport { DEFAULT_TIME_FORMAT, isValidTimeDate, mergeDate, mergeTime } from \"../timePicker/timeUtils\";\nimport { DateTimePickerInput } from \"./dateTimePickerInput\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface DateTimePickerProps\n extends Omit<TextFieldProps, \"onBlur\" \| \"onChange\" \| \"value\" \| \"defaultValue\" \| \"ref\" \| \"onToggle\"> {\n showDaysOutsideMonth?: boolean \| undefined;\n disablePast?: boolean \| undefined;\n disableFuture?: boolean \| undefined;\n minDate?: Date \| undefined;\n maxDate?: Date \| undefined;\n isDateDisabled?: ((day: Date) => boolean) \| undefined;\n weekStartsOn?: WeekStart \| undefined;\n locale?: string \| undefined;\n /** Input format with tokens dd, MM, yyyy, HH, mm, ss, e.g. \"dd/MM/yyyy HH:mm\". /\n format?: string \| undefined;\n /* Time portion format when using the clock columns. Defaults to \"HH:mm\". */\n timeFormat?: string \| undefined;\n placement?: Placement \| undefined;\n disableCalendar?: boolean \| undefined;\n label?: string \| undefined;\n calendarAriaLabel?: string \| undefined;\n value?: Date \| string \| undefined;\n calendarIcon?: JSX.Element;\n onChange?: ((event?: Event, value?: Date, data?: DateTimePickerProps) => void) \| undefined;\n onBlur?: ((event?: FocusEvent, value?: Date, data?: DateTimePickerProps) => void) \| undefined;\n ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function DateTimePicker(props: DateTimePickerProps): JSX.Element {\n const [local, rest] = splitProps(props, [\n \"value\",\n \"onChange\",\n \"showDaysOutsideMonth\",\n \"disablePast\",\n \"disableFuture\",\n \"weekStartsOn\",\n \"placement\",\n \"disabled\",\n \"disableCalendar\",\n \"calendarAriaLabel\",\n \"minDate\",\n \"maxDate\",\n \"isDateDisabled\",\n \"locale\",\n \"format\",\n \"timeFormat\",\n \"calendarIcon\",\n \"onBlur\",\n \"ref\",\n ]);\n\n const value = (): Date \| undefined => (local.value === undefined ? undefined : new Date(local.value));\n\n const initialValue = value();\n const [viewValue, setViewValue] = createSignal<Date>(\n isValidDate(initialValue) \|\| isValidTimeDate(initialValue) ? initialValue : new Date()\n );\n const [openView, setOpenView] = createSignal<OpenView>(OpenView.days);\n const [isOpen, setIsOpen] = createSignal(false);\n\n let anchorEl: HTMLElement \| undefined;\n let popupEl: HTMLElement \| undefined;\n\n const resolved = (): ReturnType<typeof resolvePlacement> => resolvePlacement(local.placement ?? \"bottom-start\");\n const floating = createFloating({\n placement: () => resolved().placement,\n middleware: () => buildFloatingMiddleware(resolved()),\n });\n\n createEffect(() => {\n if (local.disabled) return;\n const v = value();\n setViewValue(isValidDate(v) \|\| isValidTimeDate(v) ? v : new Date());\n });\n\n const weekStartsOn = (): WeekStart => local.weekStartsOn ?? 1;\n\n const onViewValueChange = (next: Date): void => {\n setViewValue(next);\n };\n\n const onMonthLabelClick = (): void => {\n setOpenView(openView() === OpenView.months ? OpenView.days : OpenView.months);\n };\n\n const onYearLabelClick = (): void => {\n setOpenView(openView() === OpenView.years ? OpenView.days : OpenView.years);\n };\n\n const onMonthChange = (month: number): void => {\n setViewValue(setMonth(viewValue(), month));\n setOpenView(OpenView.days);\n };\n\n const onYearChange = (year: number): void => {\n setViewValue(setYear(viewValue(), year));\n setOpenView(OpenView.days);\n };\n\n const emitChange = (next: Date): void => {\n setViewValue(next);\n local.onChange?.(undefined, next, props);\n };\n\n const onDateChange = (_event?: Event, date?: Date): void => {\n if (!date) return;\n const v = value();\n const timeSource = isValidTimeDate(v) ? v : viewValue();\n emitChange(mergeDate(date, timeSource));\n };\n\n const onTimeChange = (timeDate: Date): void => {\n const v = value();\n const dateSource = isValidDate(v) ? v : viewValue();\n emitChange(mergeTime(dateSource, timeDate));\n };\n\n const onToggle = (): void => {\n if (!local.disabled) setIsOpen((prev) => !prev);\n };\n\n const onClickAway = (event: MouseEvent \| TouchEvent): void => {\n const target = event.target as HTMLElement;\n if (popupEl?.contains(target) \|\| anchorEl?.contains(target)) return;\n setIsOpen(false);\n };\n\n const resolvedTimeFormat = (): string => {\n if (local.timeFormat) return local.timeFormat;\n if (local.format?.includes(\"HH:mm:ss\")) return \"HH:mm:ss\";\n return DEFAULT_TIME_FORMAT;\n };\n\n const months = createMemo(() => getMonths(local.locale));\n const years = getYears(new Date().getFullYear(), 100);\n\n const shouldOpen = (): boolean => isOpen() && !local.disabled && !local.disableCalendar;\n const [mounted, setMounted] = createSignal(shouldOpen());\n const [shown, setShown] = createSignal(false);\n let raf: number \| undefined;\n let timer: ReturnType<typeof setTimeout> \| undefined;\n\n createEffect(() => {\n if (shouldOpen()) {\n if (timer !== undefined) clearTimeout(timer);\n setMounted(true);\n raf = requestAnimationFrame(() => setShown(true));\n } else {\n setShown(false);\n if (mounted()) timer = setTimeout(() => setMounted(false), FADE_MS);\n }\n });\n onCleanup(() => {\n if (raf !== undefined) cancelAnimationFrame(raf);\n if (timer !== undefined) clearTimeout(timer);\n });\n\n const view = (): JSX.Element => {\n switch (openView()) {\n case OpenView.months:\n return <DatePickerList value={viewValue().getMonth()} items={months()} onChange={onMonthChange} />;\n case OpenView.years:\n return <DatePickerList value={viewValue().getFullYear()} items={years} onChange={onYearChange} />;\n default:\n return (\n <DataPickerDays\n viewValue={viewValue()}\n value={value()}\n showDaysOutsideMonth={local.showDaysOutsideMonth}\n onChange={onDateChange}\n disablePast={local.disablePast}\n disableFuture={local.disableFuture}\n weekStartsOn={weekStartsOn()}\n minDate={local.minDate}\n maxDate={local.maxDate}\n isDateDisabled={local.isDateDisabled}\n locale={local.locale}\n />\n );\n }\n };\n\n return (\n <>\n <DateTimePickerInput\n ref={mergeRefs(local.ref, floating.setReference, (el) => (anchorEl = el as HTMLElement))}\n value={local.value}\n onChange={local.onChange}\n onBlur={local.onBlur}\n onToggle={onToggle}\n disabled={local.disabled}\n disableCalendar={local.disableCalendar}\n format={local.format}\n calendarIcon={local.calendarIcon}\n {...rest}\n />\n <Show when={mounted()}>\n <Portal mount={(isServer ? undefined : document.body) as Node}>\n <ClickAwayListener onClickAway={onClickAway}>\n <div\n ref={mergeRefs(floating.setFloating, (el) => (popupEl = el as HTMLElement))}\n class=\"smwb-date-picker smwb-date-time-picker\"\n style={{\n ...floating.floatingStyles(),\n transition: `opacity ${FADE_MS}ms ease-in-out`,\n opacity: shown() ? 1 : 0,\n }}\n data-testid=\"date-time-picker\"\n data-smwb-overlay-layer\n role=\"dialog\"\n aria-modal=\"false\"\n aria-label={local.calendarAriaLabel ?? \"Choose date and time\"}\n >\n <div class=\"smwb-date-picker__inner smwb-date-time-picker__inner\">\n <DataPickerHeader\n viewValue={viewValue()}\n locale={local.locale}\n openView={openView()}\n onChange={onViewValueChange}\n onMonthLabelClick={onMonthLabelClick}\n onYearLabelClick={onYearLabelClick}\n />\n <div class=\"smwb-date-time-picker__content\">\n <div class=\"smwb-date-picker__body smwb-date-time-picker__body\">{view()}</div>\n <TimePickerColumns value={viewValue()} format={resolvedTimeFormat()} onChange={onTimeChange} />\n </div>\n </div>\n </div>\n </ClickAwayListener>\n </Portal>\n </Show>\n </>\n );\n}\n\nexport default DateTimePicker;\n"],"mappings":"AAAA,SAAmB,MAAM,cAAc,YAAY,cAAc,WAAW,kBAAkB;AAC9F,SAAS,QAAQ,gBAAgB;AACjC,SAAS,yBAAyC,wBAAwB;AAC1E,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAElC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAyB,WAAW,UAAU,aAAa,UAAU,eAAe;AACpF,SAAS,gBAAgB;AACzB,SAAS,yBAAyB;AAClC,SAAS,qBAAqB,iBAAiB,WAAW,iBAAiB;AAC3E,SAAS,2BAA2B;AACpC,SAAS,iBAA2B;AA2BpC,MAAM,UAAU;AAET,SAAS,eAAe,OAAyC;AACtE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,QAAQ,MAAyB,MAAM,UAAU,SAAY,SAAY,IAAI,KAAK,MAAM,KAAK;AAEnG,QAAM,eAAe,MAAM;AAC3B,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAChC,YAAY,YAAY,KAAK,gBAAgB,YAAY,IAAI,eAAe,oBAAI,KAAK;AAAA,EACvF;AACA,QAAM,CAAC,UAAU,WAAW,IAAI,aAAuB,SAAS,IAAI;AACpE,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,KAAK;AAE9C,MAAI;AACJ,MAAI;AAEJ,QAAM,WAAW,MAA2C,iBAAiB,MAAM,aAAa,cAAc;AAC9G,QAAM,WAAW,eAAe;AAAA,IAC9B,WAAW,MAAM,SAAS,EAAE;AAAA,IAC5B,YAAY,MAAM,wBAAwB,SAAS,CAAC;AAAA,EACtD,CAAC;AAED,eAAa,MAAM;AACjB,QAAI,MAAM,SAAU;AACpB,UAAM,IAAI,MAAM;AAChB,iBAAa,YAAY,CAAC,KAAK,gBAAgB,CAAC,IAAI,IAAI,oBAAI,KAAK,CAAC;AAAA,EACpE,CAAC;AAED,QAAM,eAAe,MAAiB,MAAM,gBAAgB;AAE5D,QAAM,oBAAoB,CAAC,SAAqB;AAC9C,iBAAa,IAAI;AAAA,EACnB;AAEA,QAAM,oBAAoB,MAAY;AACpC,gBAAY,SAAS,MAAM,SAAS,SAAS,SAAS,OAAO,SAAS,MAAM;AAAA,EAC9E;AAEA,QAAM,mBAAmB,MAAY;AACnC,gBAAY,SAAS,MAAM,SAAS,QAAQ,SAAS,OAAO,SAAS,KAAK;AAAA,EAC5E;AAEA,QAAM,gBAAgB,CAAC,UAAwB;AAC7C,iBAAa,SAAS,UAAU,GAAG,KAAK,CAAC;AACzC,gBAAY,SAAS,IAAI;AAAA,EAC3B;AAEA,QAAM,eAAe,CAAC,SAAuB;AAC3C,iBAAa,QAAQ,UAAU,GAAG,IAAI,CAAC;AACvC,gBAAY,SAAS,IAAI;AAAA,EAC3B;AAEA,QAAM,aAAa,CAAC,SAAqB;AACvC,iBAAa,IAAI;AACjB,UAAM,WAAW,QAAW,MAAM,KAAK;AAAA,EACzC;AAEA,QAAM,eAAe,CAAC,QAAgB,SAAsB;AAC1D,QAAI,CAAC,KAAM;AACX,UAAM,IAAI,MAAM;AAChB,UAAM,aAAa,gBAAgB,CAAC,IAAI,IAAI,UAAU;AACtD,eAAW,UAAU,MAAM,UAAU,CAAC;AAAA,EACxC;AAEA,QAAM,eAAe,CAAC,aAAyB;AAC7C,UAAM,IAAI,MAAM;AAChB,UAAM,aAAa,YAAY,CAAC,IAAI,IAAI,UAAU;AAClD,eAAW,UAAU,YAAY,QAAQ,CAAC;AAAA,EAC5C;AAEA,QAAM,WAAW,MAAY;AAC3B,QAAI,CAAC,MAAM,SAAU,WAAU,CAAC,SAAS,CAAC,IAAI;AAAA,EAChD;AAEA,QAAM,cAAc,CAAC,UAAyC;AAC5D,UAAM,SAAS,MAAM;AACrB,QAAI,SAAS,SAAS,MAAM,KAAK,UAAU,SAAS,MAAM,EAAG;AAC7D,cAAU,KAAK;AAAA,EACjB;AAEA,QAAM,qBAAqB,MAAc;AACvC,QAAI,MAAM,WAAY,QAAO,MAAM;AACnC,QAAI,MAAM,QAAQ,SAAS,UAAU,EAAG,QAAO;AAC/C,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,WAAW,MAAM,UAAU,MAAM,MAAM,CAAC;AACvD,QAAM,QAAQ,UAAS,oBAAI,KAAK,GAAE,YAAY,GAAG,GAAG;AAEpD,QAAM,aAAa,MAAe,OAAO,KAAK,CAAC,MAAM,YAAY,CAAC,MAAM;AACxE,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,WAAW,CAAC;AACvD,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAa,KAAK;AAC5C,MAAI;AACJ,MAAI;AAEJ,eAAa,MAAM;AACjB,QAAI,WAAW,GAAG;AAChB,UAAI,UAAU,OAAW,cAAa,KAAK;AAC3C,iBAAW,IAAI;AACf,YAAM,sBAAsB,MAAM,SAAS,IAAI,CAAC;AAAA,IAClD,OAAO;AACL,eAAS,KAAK;AACd,UAAI,QAAQ,EAAG,SAAQ,WAAW,MAAM,WAAW,KAAK,GAAG,OAAO;AAAA,IACpE;AAAA,EACF,CAAC;AACD,YAAU,MAAM;AACd,QAAI,QAAQ,OAAW,sBAAqB,GAAG;AAC/C,QAAI,UAAU,OAAW,cAAa,KAAK;AAAA,EAC7C,CAAC;AAED,QAAM,OAAO,MAAmB;AAC9B,YAAQ,SAAS,GAAG;AAAA,MAClB,KAAK,SAAS;AACZ,eAAO,CAAC,eAAe,OAAO,UAAU,EAAE,SAAS,GAAG,OAAO,OAAO,GAAG,UAAU,eAAe;AAAA,MAClG,KAAK,SAAS;AACZ,eAAO,CAAC,eAAe,OAAO,UAAU,EAAE,YAAY,GAAG,OAAO,OAAO,UAAU,cAAc;AAAA,MACjG;AACE,eACE,CAAC;AAAA,UACC,WAAW,UAAU;AAAA,UACrB,OAAO,MAAM;AAAA,UACb,sBAAsB,MAAM;AAAA,UAC5B,UAAU;AAAA,UACV,aAAa,MAAM;AAAA,UACnB,eAAe,MAAM;AAAA,UACrB,cAAc,aAAa;AAAA,UAC3B,SAAS,MAAM;AAAA,UACf,SAAS,MAAM;AAAA,UACf,gBAAgB,MAAM;AAAA,UACtB,QAAQ,MAAM;AAAA,QAChB;AAAA,IAEN;AAAA,EACF;AAEA,SACE,EAAE;AAAA,MACA,CAAC;AAAA,IACC,KAAK,UAAU,MAAM,KAAK,SAAS,cAAc,CAAC,OAAQ,WAAW,EAAkB;AAAA,IACvF,OAAO,MAAM;AAAA,IACb,UAAU,MAAM;AAAA,IAChB,QAAQ,MAAM;AAAA,IACd,UAAU;AAAA,IACV,UAAU,MAAM;AAAA,IAChB,iBAAiB,MAAM;AAAA,IACvB,QAAQ,MAAM;AAAA,IACd,cAAc,MAAM;AAAA,QAChB;AAAA,EACN,EAAE;AAAA,MACF,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,QACrB,CAAC,OAAO,OAAQ,WAAW,SAAY,SAAS,MAAe;AAAA,UAC7D,CAAC,kBAAkB,aAAa,aAAa;AAAA,YAC3C,CAAC;AAAA,IACC,KAAK,UAAU,SAAS,aAAa,CAAC,OAAQ,UAAU,EAAkB;AAAA,IAC1E,MAAM;AAAA,IACN,OAAO;AAAA,MACL,GAAG,SAAS,eAAe;AAAA,MAC3B,YAAY,WAAW,OAAO;AAAA,MAC9B,SAAS,MAAM,IAAI,IAAI;AAAA,IACzB;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,KAAK;AAAA,IACL,WAAW;AAAA,IACX,YAAY,MAAM,qBAAqB;AAAA,GACxC;AAAA,cACC,CAAC,IAAI,MAAM,uDAAuD;AAAA,gBAChE,CAAC;AAAA,IACC,WAAW,UAAU;AAAA,IACrB,QAAQ,MAAM;AAAA,IACd,UAAU,SAAS;AAAA,IACnB,UAAU;AAAA,IACV,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,EACpB,EAAE;AAAA,gBACF,CAAC,IAAI,MAAM,iCAAiC;AAAA,kBAC1C,CAAC,IAAI,MAAM,sDAAsD,KAAK,EAAE,EAAvE,IAA6E;AAAA,kBAC9E,CAAC,kBAAkB,OAAO,UAAU,GAAG,QAAQ,mBAAmB,GAAG,UAAU,cAAc,EAAE;AAAA,gBACjG,EAHC,IAGK;AAAA,cACR,EAbC,IAaK;AAAA,YACR,EA5BC,IA4BK;AAAA,UACR,EA9BC,kBA8BmB;AAAA,QACtB,EAhCC,OAgCQ;AAAA,MACX,EAlCC,KAkCM;AAAA,IACT;AAEJ;AAEA,IAAO,yBAAQ;","names":[],"file":"dateTimePicker.jsx"}
1	+ {"version":3,"sources":["../../../../../src/components/inputs/dateTimePicker/dateTimePicker.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, createMemo, createSignal, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport { buildFloatingMiddleware, type Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport type { TextFieldProps } from \"../textField\";\nimport { DataPickerHeader } from \"../datePicker/dataPickerHeader\";\nimport { DataPickerDays } from \"../datePicker/dataPickerDays\";\nimport { DatePickerList } from \"../datePicker/datePickerList\";\nimport { type WeekStart, getMonths, getYears, isValidDate, setMonth, setYear } from \"../datePicker/dateUtils\";\nimport { OpenView } from \"../datePicker/openView\";\nimport { TimePickerColumns } from \"../timePicker/timePickerColumns\";\nimport { DEFAULT_TIME_FORMAT, isValidTimeDate, mergeDate, mergeTime } from \"../timePicker/timeUtils\";\nimport { DateTimePickerInput } from \"./dateTimePickerInput\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface DateTimePickerProps\n extends Omit<TextFieldProps, \"onBlur\" \| \"onChange\" \| \"value\" \| \"defaultValue\" \| \"ref\" \| \"onToggle\"> {\n showDaysOutsideMonth?: boolean \| undefined;\n disablePast?: boolean \| undefined;\n disableFuture?: boolean \| undefined;\n minDate?: Date \| undefined;\n maxDate?: Date \| undefined;\n isDateDisabled?: ((day: Date) => boolean) \| undefined;\n weekStartsOn?: WeekStart \| undefined;\n locale?: string \| undefined;\n /** Input format with tokens dd, MM, yyyy, HH, mm, ss, e.g. \"dd/MM/yyyy HH:mm\". /\n format?: string \| undefined;\n /* Time portion format when using the clock columns. Defaults to \"HH:mm\". */\n timeFormat?: string \| undefined;\n placement?: Placement \| undefined;\n disableCalendar?: boolean \| undefined;\n label?: string \| undefined;\n calendarAriaLabel?: string \| undefined;\n value?: Date \| string \| undefined;\n calendarIcon?: JSX.Element;\n onChange?: ((event?: Event, value?: Date, data?: DateTimePickerProps) => void) \| undefined;\n onBlur?: ((event?: FocusEvent, value?: Date, data?: DateTimePickerProps) => void) \| undefined;\n ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function DateTimePicker(props: DateTimePickerProps): JSX.Element {\n const [local, rest] = splitProps(props, [\n \"value\",\n \"onChange\",\n \"showDaysOutsideMonth\",\n \"disablePast\",\n \"disableFuture\",\n \"weekStartsOn\",\n \"placement\",\n \"disabled\",\n \"disableCalendar\",\n \"calendarAriaLabel\",\n \"minDate\",\n \"maxDate\",\n \"isDateDisabled\",\n \"locale\",\n \"format\",\n \"timeFormat\",\n \"calendarIcon\",\n \"onBlur\",\n \"ref\",\n ]);\n\n const value = (): Date \| undefined => (local.value === undefined ? undefined : new Date(local.value));\n\n const initialValue = value();\n const [viewValue, setViewValue] = createSignal<Date>(\n isValidDate(initialValue) \|\| isValidTimeDate(initialValue) ? initialValue : new Date()\n );\n const [openView, setOpenView] = createSignal<OpenView>(OpenView.days);\n const [isOpen, setIsOpen] = createSignal(false);\n\n let anchorEl: HTMLElement \| undefined;\n let popupEl: HTMLElement \| undefined;\n\n const resolved = (): ReturnType<typeof resolvePlacement> => resolvePlacement(local.placement ?? \"bottom-start\");\n const floating = createFloating({\n placement: () => resolved().placement,\n middleware: () => buildFloatingMiddleware(resolved()),\n });\n\n createEffect(() => {\n if (local.disabled) return;\n const v = value();\n setViewValue(isValidDate(v) \|\| isValidTimeDate(v) ? v : new Date());\n });\n\n const weekStartsOn = (): WeekStart => local.weekStartsOn ?? 1;\n\n const onViewValueChange = (next: Date): void => {\n setViewValue(next);\n };\n\n const onMonthLabelClick = (): void => {\n setOpenView(openView() === OpenView.months ? OpenView.days : OpenView.months);\n };\n\n const onYearLabelClick = (): void => {\n setOpenView(openView() === OpenView.years ? OpenView.days : OpenView.years);\n };\n\n const onMonthChange = (month: number): void => {\n setViewValue(setMonth(viewValue(), month));\n setOpenView(OpenView.days);\n };\n\n const onYearChange = (year: number): void => {\n setViewValue(setYear(viewValue(), year));\n setOpenView(OpenView.days);\n };\n\n const emitChange = (next: Date): void => {\n setViewValue(next);\n local.onChange?.(undefined, next, props);\n };\n\n const onDateChange = (_event?: Event, date?: Date): void => {\n if (!date) return;\n const v = value();\n const timeSource = isValidTimeDate(v) ? v : viewValue();\n emitChange(mergeDate(date, timeSource));\n };\n\n const onTimeChange = (timeDate: Date): void => {\n const v = value();\n const dateSource = isValidDate(v) ? v : viewValue();\n emitChange(mergeTime(dateSource, timeDate));\n };\n\n const onToggle = (): void => {\n if (!local.disabled) setIsOpen((prev) => !prev);\n };\n\n const onClickAway = (event: MouseEvent \| TouchEvent): void => {\n const target = event.target as HTMLElement;\n if (popupEl?.contains(target) \|\| anchorEl?.contains(target)) return;\n setIsOpen(false);\n };\n\n const resolvedTimeFormat = (): string => {\n if (local.timeFormat) return local.timeFormat;\n if (local.format?.includes(\"HH:mm:ss\")) return \"HH:mm:ss\";\n return DEFAULT_TIME_FORMAT;\n };\n\n const months = createMemo(() => getMonths(local.locale));\n const years = getYears(new Date().getFullYear(), 100);\n\n const shouldOpen = (): boolean => isOpen() && !local.disabled && !local.disableCalendar;\n const [mounted, setMounted] = createSignal(shouldOpen());\n const [shown, setShown] = createSignal(false);\n let raf: number \| undefined;\n let timer: ReturnType<typeof setTimeout> \| undefined;\n\n createEffect(() => {\n if (shouldOpen()) {\n if (timer !== undefined) clearTimeout(timer);\n setMounted(true);\n raf = requestAnimationFrame(() => setShown(true));\n } else {\n setShown(false);\n if (mounted()) timer = setTimeout(() => setMounted(false), FADE_MS);\n }\n });\n onCleanup(() => {\n if (raf !== undefined) cancelAnimationFrame(raf);\n if (timer !== undefined) clearTimeout(timer);\n });\n\n // Escape closes the panel while it is the topmost overlay layer, so the next one\n // reaches a Modal or Sheet around the picker. Focus left in the panel (or on\n // <body> after a click there) goes back to the input rather than being lost.\n createEffect(() => {\n if (!shouldOpen()) return;\n const onKeyDown = (event: KeyboardEvent): void => {\n const panel = popupEl;\n if (event.key !== \"Escape\" \|\| !panel \|\| !isTopOverlayLayer(panel)) return;\n setIsOpen(false);\n const active = document.activeElement;\n if (!active \|\| active === document.body \|\| panel.contains(active)) anchorEl?.focus();\n };\n document.addEventListener(\"keydown\", onKeyDown);\n onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n });\n\n const view = (): JSX.Element => {\n switch (openView()) {\n case OpenView.months:\n return <DatePickerList value={viewValue().getMonth()} items={months()} onChange={onMonthChange} />;\n case OpenView.years:\n return <DatePickerList value={viewValue().getFullYear()} items={years} onChange={onYearChange} />;\n default:\n return (\n <DataPickerDays\n viewValue={viewValue()}\n value={value()}\n showDaysOutsideMonth={local.showDaysOutsideMonth}\n onChange={onDateChange}\n disablePast={local.disablePast}\n disableFuture={local.disableFuture}\n weekStartsOn={weekStartsOn()}\n minDate={local.minDate}\n maxDate={local.maxDate}\n isDateDisabled={local.isDateDisabled}\n locale={local.locale}\n />\n );\n }\n };\n\n return (\n <>\n <DateTimePickerInput\n ref={mergeRefs(local.ref, floating.setReference, (el) => (anchorEl = el as HTMLElement))}\n value={local.value}\n onChange={local.onChange}\n onBlur={local.onBlur}\n onToggle={onToggle}\n disabled={local.disabled}\n disableCalendar={local.disableCalendar}\n format={local.format}\n calendarIcon={local.calendarIcon}\n {...rest}\n />\n <Show when={mounted()}>\n <Portal mount={(isServer ? undefined : document.body) as Node}>\n <ClickAwayListener onClickAway={onClickAway}>\n <div\n ref={mergeRefs(floating.setFloating, (el) => (popupEl = el as HTMLElement))}\n class=\"smwb-date-picker smwb-date-time-picker\"\n style={{\n ...floating.floatingStyles(),\n transition: `opacity ${FADE_MS}ms ease-in-out`,\n opacity: shown() ? 1 : 0,\n }}\n data-testid=\"date-time-picker\"\n data-smwb-overlay-layer\n role=\"dialog\"\n aria-modal=\"false\"\n aria-label={local.calendarAriaLabel ?? \"Choose date and time\"}\n >\n <div class=\"smwb-date-picker__inner smwb-date-time-picker__inner\">\n <DataPickerHeader\n viewValue={viewValue()}\n locale={local.locale}\n openView={openView()}\n onChange={onViewValueChange}\n onMonthLabelClick={onMonthLabelClick}\n onYearLabelClick={onYearLabelClick}\n />\n <div class=\"smwb-date-time-picker__content\">\n <div class=\"smwb-date-picker__body smwb-date-time-picker__body\">{view()}</div>\n <TimePickerColumns value={viewValue()} format={resolvedTimeFormat()} onChange={onTimeChange} />\n </div>\n </div>\n </div>\n </ClickAwayListener>\n </Portal>\n </Show>\n </>\n );\n}\n\nexport default DateTimePicker;\n"],"mappings":"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","names":[],"file":"dateTimePicker.jsx"}

package/dist/source/components/inputs/floatingButton/floatingButton.jsx CHANGED Viewed

@@ -4,14 +4,25 @@ import { mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Ripple } from "../../base/ripple";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { callHandler } from "../../../primitives/callHandler";
 function FloatingButton(props) {
   const merged = mergeProps(
     { variant: "default", size: "medium", color: "primary", type: "button" },
     props
   );
-  const [local, rest] = splitProps(merged, ["children", "class", "variant", "size", "color", "ref"]);
+  const [local, rest] = splitProps(merged, [
+    "children",
+    "class",
+    "variant",
+    "size",
+    "color",
+    "ref",
+    // The button sets this on its root too; its own handler calls the caller's first.
+    "onPointerDown"
+  ]);
   let rippleActions;
   const onPointerDown = (event) => {
+    callHandler(local.onPointerDown, event);
     rippleActions?.onRipple(event);
   };
   return <button

package/dist/source/components/inputs/floatingButton/floatingButton.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/inputs/floatingButton/floatingButton.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/floatingButton/floatingButton.entry.less\";\nimport { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type FloatingButtonColor = \"primary\" \| \"secondary\" \| \"error\" \| \"success\" \| \"warning\" \| \"info\";\n\nexport interface FloatingButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: \"extended\" \| \"default\";\n size?: \"small\" \| \"medium\" \| \"large\";\n /** Semantic color. Resolves through the shared `--smui-Color` tokens. */\n color?: FloatingButtonColor;\n ref?: Ref<HTMLButtonElement>;\n}\n\nexport function FloatingButton(props: ParentProps<FloatingButtonProps>): JSX.Element {\n const merged = mergeProps(\n { variant: \"default\" as const, size: \"medium\" as const, color: \"primary\" as FloatingButtonColor, type: \"button\" as const },\n props\n );\n const [local, rest] = splitProps(merged, [\"children\", \"class\", \"variant\", \"size\", \"color\", \"ref\"]);\n\n let rippleActions: RippleActionsRef \| undefined;\n\n const onPointerDown = (event~~: PointerEvent~~): ~~void~~ => {\n rippleActions?.onRipple(event);\n };\n\n return (\n <button\n {...rest}\n ref={mergeRefs(local.ref)}\n class={cn(\"smwb-fab\", `smwb-${local.variant}`, `smwb-${local.size}`, `smwb-fab_color-${local.color}`, local.class)}\n onPointerDown={onPointerDown}\n >\n {local.children}\n <Ripple actionRef={(actions) => (rippleActions = actions)} />\n </button>\n );\n}\n\nexport default FloatingButton;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;~~AAY7B~~,SAAS,eAAe,OAAsD;AACnF,QAAM,SAAS;AAAA,IACb,EAAE,SAAS,WAAoB,MAAM,UAAmB,OAAO,WAAkC,MAAM,SAAkB;AAAA,IACzH;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,~~CAAC~~,~~YAAY~~,~~SAAS~~,~~WAAW~~,~~QAAQ~~,~~SAAS~~,~~KAAK~~,CAAC;~~AAEjG~~,MAAI;AAEJ,QAAM,~~gBAAgB~~,CAAC,~~UAA8B~~;~~AACnD~~,mBAAe,SAAS,KAAK;AAAA,EAC/B;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,YAAY,QAAQ,MAAM,OAAO,IAAI,QAAQ,MAAM,IAAI,IAAI,kBAAkB,MAAM,KAAK,IAAI,MAAM,KAAK;AAAA,IACjH,eAAe;AAAA,GAChB;AAAA,OACE,MAAM,SAAS;AAAA,MAChB,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,EAAE;AAAA,IAC/D,EARC;AAUL;AAEA,IAAO,yBAAQ;","names":[],"file":"floatingButton.jsx"}
1	+ {"version":3,"sources":["../../../../../src/components/inputs/floatingButton/floatingButton.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/floatingButton/floatingButton.entry.less\";\nimport { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type FloatingButtonColor = \"primary\" \| \"secondary\" \| \"error\" \| \"success\" \| \"warning\" \| \"info\";\n\nexport interface FloatingButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: \"extended\" \| \"default\";\n size?: \"small\" \| \"medium\" \| \"large\";\n /** Semantic color. Resolves through the shared `--smui-Color` tokens. */\n color?: FloatingButtonColor;\n ref?: Ref<HTMLButtonElement>;\n}\n\nexport function FloatingButton(props: ParentProps<FloatingButtonProps>): JSX.Element {\n const merged = mergeProps(\n { variant: \"default\" as const, size: \"medium\" as const, color: \"primary\" as FloatingButtonColor, type: \"button\" as const },\n props\n );\n const [local, rest] = splitProps(merged, [\n \"children\",\n \"class\",\n \"variant\",\n \"size\",\n \"color\",\n \"ref\",\n // The button sets this on its root too; its own handler calls the caller's first.\n \"onPointerDown\",\n ]);\n\n let rippleActions: RippleActionsRef \| undefined;\n\n const onPointerDown: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {\n callHandler(local.onPointerDown, event);\n rippleActions?.onRipple(event);\n };\n\n return (\n <button\n {...rest}\n ref={mergeRefs(local.ref)}\n class={cn(\"smwb-fab\", `smwb-${local.variant}`, `smwb-${local.size}`, `smwb-fab_color-${local.color}`, local.class)}\n onPointerDown={onPointerDown}\n >\n {local.children}\n <Ripple actionRef={(actions) => (rippleActions = actions)} />\n </button>\n );\n}\n\nexport default FloatingButton;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAYrB,SAAS,eAAe,OAAsD;AACnF,QAAM,SAAS;AAAA,IACb,EAAE,SAAS,WAAoB,MAAM,UAAmB,OAAO,WAAkC,MAAM,SAAkB;AAAA,IACzH;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EACF,CAAC;AAED,MAAI;AAEJ,QAAM,gBAAmE,CAAC,UAAU;AAClF,gBAAY,MAAM,eAAe,KAAK;AACtC,mBAAe,SAAS,KAAK;AAAA,EAC/B;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,YAAY,QAAQ,MAAM,OAAO,IAAI,QAAQ,MAAM,IAAI,IAAI,kBAAkB,MAAM,KAAK,IAAI,MAAM,KAAK;AAAA,IACjH,eAAe;AAAA,GAChB;AAAA,OACE,MAAM,SAAS;AAAA,MAChB,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,EAAE;AAAA,IAC/D,EARC;AAUL;AAEA,IAAO,yBAAQ;","names":[],"file":"floatingButton.jsx"}

package/dist/source/components/inputs/radioButton/radioButton.jsx CHANGED Viewed

@@ -3,14 +3,17 @@ import "@smwb/ui-styles/less/components/radioButton/radioButton.entry.less";
 import { Show, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { TextFieldWrapper } from "../textField/textFieldWrapper";
+import { createHelperText } from "../../../primitives/createHelperText";
 import { createId } from "../../../primitives/createId";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { callHandler } from "../../../primitives/callHandler";
 function RadioButton(props) {
   const merged = mergeProps({ size: "medium", color: "primary" }, props);
   const [local, args] = splitProps(merged, [
     "label",
     "disabled",
     "readOnly",
+    "onClick",
     "required",
     "name",
     "id",
@@ -20,19 +23,26 @@ function RadioButton(props) {
     "error",
     "onChange",
     "class",
-    "ref"
+    "aria-describedby",
+    "ref",
+    "data-testid"
   ]);
   const id = createId(local.id);
+  const helper = createHelperText(() => local.helperText, { describedBy: () => local["aria-describedby"] });
+  const handleClick = (event) => {
+    callHandler(local.onClick, event);
+    if (local.readOnly) event.preventDefault();
+  };
   const handleChange = (event) => {
     if (local.readOnly) {
-      event.preventDefault();
       return;
     }
     const value = props.value !== void 0 ? props.value : event.currentTarget.checked;
     local.onChange?.(event, value, props);
   };
   return <TextFieldWrapper
-    helperText={local.helperText}
+    helperText={helper.text()}
+    helperTextId={helper.id}
     disabled={local.disabled}
     error={local.error}
     class="smwb-text-field-checkbox"
@@ -53,12 +63,14 @@ function RadioButton(props) {
     required={local.required}
     aria-invalid={local.error || void 0}
     aria-required={local.required || void 0}
+    aria-describedby={helper.describedBy()}
     class={cn("smwb-radio__input", local.class)}
     type="radio"
-    data-testid="radio"
+    data-testid={local["data-testid"] ?? "radio"}
     ref={mergeRefs(local.ref)}
     {...args}
     onChange={handleChange}
+    onClick={handleClick}
   />
           <span class={cn("smwb-radio__btn", { "smwb-disabled": local.disabled })} />
           <span class={cn("smwb-radio__bg", { "smwb-disabled": local.disabled })} />

package/dist/source/components/inputs/radioButton/radioButton.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/inputs/radioButton/radioButton.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/radioButton/radioButton.entry.less\";\nimport { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { SelectionChangeEvent, SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface RadioButtonProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" \| \"size\"> {\n label?: string;\n disabled?: boolean;\n readOnly?: boolean;\n required?: boolean;\n name?: string;\n id?: string;\n checked?: boolean;\n size?: SelectionControlSize;\n color?: SelectionControlColor;\n helperText?: JSX.Element;\n error?: boolean;\n /** Unified handler: `(event, value, data)` where `value` is the radio's value (or checked state). */\n onChange?: (\n event: SelectionChangeEvent,\n value: string \| number \| string[] \| boolean \| undefined,\n data: RadioButtonProps\n ) => void;\n ref?: Ref<HTMLInputElement>;\n}\n\nexport function RadioButton(props: RadioButtonProps): JSX.Element {\n const merged = mergeProps({ size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor }, props);\n const [local, args] = splitProps(merged, [\n \"label\",\n \"disabled\",\n \"readOnly\",\n \"required\",\n \"name\",\n \"id\",\n \"size\",\n \"color\",\n \"helperText\",\n \"error\",\n \"onChange\",\n \"class\",\n \"ref\",\n ]);\n const id = createId(local.id);\n\n const ~~handleChange~~: JSX.EventHandler<HTMLInputElement, ~~Event~~> = (event) => {\n if (local.readOnly) ~~{\n~~ event.preventDefault();\n return;\n }\n const value = props.value !== undefined ? (props.value as string \| number \| string[]) : event.currentTarget.checked;\n local.onChange?.(event, value, props);\n };\n\n return (\n <TextFieldWrapper\n helperText={~~local~~.~~helperText~~}\n disabled={local.disabled}\n error={local.error}\n class=\"smwb-text-field-checkbox\"\n >\n <label\n for={id}\n class={cn(\"smwb-radio\", `smwb-radio_size-${local.size}`, `smwb-radio_color-${local.color}`, {\n \"smwb-disabled\": local.disabled,\n \"smwb-readonly\": local.readOnly,\n })}\n >\n <span class=\"smwb-radio__wrapper\">\n <input\n id={id}\n name={local.name}\n disabled={local.disabled}\n readonly={local.readOnly}\n required={local.required}\n aria-invalid={local.error \|\| undefined}\n aria-required={local.required \|\| undefined}\n class={cn(\"smwb-radio__input\", local.class)}\n type=\"radio\"\n data-testid=\"radio\"\n ref={mergeRefs(local.ref)}\n {...args}\n onChange={handleChange}\n />\n <span class={cn(\"smwb-radio__btn\", { \"smwb-disabled\": local.disabled })} />\n <span class={cn(\"smwb-radio__bg\", { \"smwb-disabled\": local.disabled })} />\n </span>\n <Show when={local.label}>\n <span class=\"smwb-radio__label\">{local.label}</span>\n </Show>\n </label>\n </TextFieldWrapper>\n );\n}\n\nexport default RadioButton;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,YAAY,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;~~AAwB7B~~,SAAS,YAAY,OAAsC;AAChE,QAAM,SAAS,WAAW,EAAE,MAAM,UAAkC,OAAO,UAAmC,GAAG,KAAK;AACtH,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,KAAK,SAAS,MAAM,EAAE;~~AAE5B~~,QAAM,eAA0D,CAAC,UAAU;AACzE,QAAI,MAAM,UAAU;AAClB~~,YAAM,eAAe~~;~~AACrB;~~AAAA,IACF;AACA,UAAM,QAAQ,MAAM,UAAU,SAAa,MAAM,QAAuC,MAAM,cAAc;AAC5G,UAAM,WAAW,OAAO,OAAO,KAAK;AAAA,EACtC;AAEA,SACE,CAAC;AAAA,IACC,YAAY,~~MAAM~~;AAAA,~~IAClB~~,UAAU,MAAM;AAAA,IAChB,OAAO,MAAM;AAAA,IACb,MAAM;AAAA,GACP;AAAA,MACC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,GAAG,cAAc,mBAAmB,MAAM,IAAI,IAAI,oBAAoB,MAAM,KAAK,IAAI;AAAA,MAC1F,iBAAiB,MAAM;AAAA,MACvB,iBAAiB,MAAM;AAAA,IACzB,CAAC;AAAA,GACF;AAAA,QACC,CAAC,KAAK,MAAM,sBAAsB;AAAA,UAChC,CAAC;AAAA,IACC,IAAI;AAAA,IACJ,MAAM,MAAM;AAAA,IACZ,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,cAAc,MAAM,SAAS;AAAA,IAC7B,eAAe,MAAM,YAAY;AAAA,IACjC,OAAO,GAAG,qBAAqB,MAAM,KAAK;AAAA,IAC1C,KAAK;AAAA,IACL,~~YAAY~~;AAAA,~~IACZ~~,KAAK,UAAU,MAAM,GAAG;AAAA,QACpB;AAAA,IACJ,UAAU;AAAA,~~EACZ~~,EAAE;AAAA,UACF,CAAC,KAAK,OAAO,GAAG,mBAAmB,EAAE,iBAAiB,MAAM,SAAS,CAAC,GAAG,EAAE;AAAA,UAC3E,CAAC,KAAK,OAAO,GAAG,kBAAkB,EAAE,iBAAiB,MAAM,SAAS,CAAC,GAAG,EAAE;AAAA,QAC5E,~~EAlBC~~,~~KAkBM~~;AAAA,QACP,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,KAAK,MAAM,qBAAqB,MAAM,MAAM,EAA5C,KAAmD;AAAA,QACtD,EAFC,KAEM;AAAA,MACT,~~EA7BC~~,~~MA6BO~~;AAAA,IACV,~~EApCC~~;~~AAsCL~~;AAEA,IAAO,sBAAQ;","names":[],"file":"radioButton.jsx"}
1	+ {"version":3,"sources":["../../../../../src/components/inputs/radioButton/radioButton.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/radioButton/radioButton.entry.less\";\nimport { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createHelperText } from \"../../../primitives/createHelperText\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport type { SelectionChangeEvent, SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface RadioButtonProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" \| \"size\"> {\n label?: string;\n disabled?: boolean;\n /*\n Keeps the radio as it is: clicks on it or its label, Space and the arrow keys of its group do not check it, and\n * `onChange` is not called. It stays focusable.\n \n The input does not tell assistive technology it is read-only: ARIA has no read-only state for a single radio,\n * only for its group. Put `role=\"radiogroup\"`, a name and `aria-readonly=\"true\"` on the element around the radios.\n /\n readOnly?: boolean;\n required?: boolean;\n name?: string;\n id?: string;\n checked?: boolean;\n size?: SelectionControlSize;\n color?: SelectionControlColor;\n helperText?: JSX.Element;\n error?: boolean;\n /* Unified handler: `(event, value, data)` where `value` is the radio's value (or checked state). /\n onChange?: (\n event: SelectionChangeEvent,\n value: string \| number \| string[] \| boolean \| undefined,\n data: RadioButtonProps\n ) => void;\n /* Test id of the `<input>`; `radio` unless given. */\n \"data-testid\"?: string \| undefined;\n ref?: Ref<HTMLInputElement>;\n}\n\nexport function RadioButton(props: RadioButtonProps): JSX.Element {\n const merged = mergeProps({ size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor }, props);\n const [local, args] = splitProps(merged, [\n \"label\",\n \"disabled\",\n \"readOnly\",\n \"onClick\",\n \"required\",\n \"name\",\n \"id\",\n \"size\",\n \"color\",\n \"helperText\",\n \"error\",\n \"onChange\",\n \"class\",\n \"aria-describedby\",\n \"ref\",\n \"data-testid\",\n ]);\n const id = createId(local.id);\n const helper = createHelperText(() => local.helperText, { describedBy: () => local[\"aria-describedby\"] });\n\n // `readonly` means nothing to a radio input: a click on it or on its label, Space, and the arrow\n // keys in its group still check it. Cancel the click; the browser then puts the previous state\n // back and re-checks the radio that was checked before.\n const handleClick: JSX.EventHandler<HTMLInputElement, MouseEvent> = (event) => {\n callHandler(local.onClick, event);\n if (local.readOnly) event.preventDefault();\n };\n\n const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {\n if (local.readOnly) {\n return;\n }\n const value = props.value !== undefined ? (props.value as string \| number \| string[]) : event.currentTarget.checked;\n local.onChange?.(event, value, props);\n };\n\n return (\n <TextFieldWrapper\n helperText={helper.text()}\n helperTextId={helper.id}\n disabled={local.disabled}\n error={local.error}\n class=\"smwb-text-field-checkbox\"\n >\n <label\n for={id}\n class={cn(\"smwb-radio\", `smwb-radio_size-${local.size}`, `smwb-radio_color-${local.color}`, {\n \"smwb-disabled\": local.disabled,\n \"smwb-readonly\": local.readOnly,\n })}\n >\n <span class=\"smwb-radio__wrapper\">\n <input\n id={id}\n name={local.name}\n disabled={local.disabled}\n readonly={local.readOnly}\n required={local.required}\n aria-invalid={local.error \|\| undefined}\n aria-required={local.required \|\| undefined}\n aria-describedby={helper.describedBy()}\n class={cn(\"smwb-radio__input\", local.class)}\n type=\"radio\"\n data-testid={local[\"data-testid\"] ?? \"radio\"}\n ref={mergeRefs(local.ref)}\n {...args}\n onChange={handleChange}\n onClick={handleClick}\n />\n <span class={cn(\"smwb-radio__btn\", { \"smwb-disabled\": local.disabled })} />\n <span class={cn(\"smwb-radio__bg\", { \"smwb-disabled\": local.disabled })} />\n </span>\n <Show when={local.label}>\n <span class=\"smwb-radio__label\">{local.label}</span>\n </Show>\n </label>\n </TextFieldWrapper>\n );\n}\n\nexport default RadioButton;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,YAAY,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAiCrB,SAAS,YAAY,OAAsC;AAChE,QAAM,SAAS,WAAW,EAAE,MAAM,UAAkC,OAAO,UAAmC,GAAG,KAAK;AACtH,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,KAAK,SAAS,MAAM,EAAE;AAC5B,QAAM,SAAS,iBAAiB,MAAM,MAAM,YAAY,EAAE,aAAa,MAAM,MAAM,kBAAkB,EAAE,CAAC;AAKxG,QAAM,cAA8D,CAAC,UAAU;AAC7E,gBAAY,MAAM,SAAS,KAAK;AAChC,QAAI,MAAM,SAAU,OAAM,eAAe;AAAA,EAC3C;AAEA,QAAM,eAA0D,CAAC,UAAU;AACzE,QAAI,MAAM,UAAU;AAClB;AAAA,IACF;AACA,UAAM,QAAQ,MAAM,UAAU,SAAa,MAAM,QAAuC,MAAM,cAAc;AAC5G,UAAM,WAAW,OAAO,OAAO,KAAK;AAAA,EACtC;AAEA,SACE,CAAC;AAAA,IACC,YAAY,OAAO,KAAK;AAAA,IACxB,cAAc,OAAO;AAAA,IACrB,UAAU,MAAM;AAAA,IAChB,OAAO,MAAM;AAAA,IACb,MAAM;AAAA,GACP;AAAA,MACC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,GAAG,cAAc,mBAAmB,MAAM,IAAI,IAAI,oBAAoB,MAAM,KAAK,IAAI;AAAA,MAC1F,iBAAiB,MAAM;AAAA,MACvB,iBAAiB,MAAM;AAAA,IACzB,CAAC;AAAA,GACF;AAAA,QACC,CAAC,KAAK,MAAM,sBAAsB;AAAA,UAChC,CAAC;AAAA,IACC,IAAI;AAAA,IACJ,MAAM,MAAM;AAAA,IACZ,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,cAAc,MAAM,SAAS;AAAA,IAC7B,eAAe,MAAM,YAAY;AAAA,IACjC,kBAAkB,OAAO,YAAY;AAAA,IACrC,OAAO,GAAG,qBAAqB,MAAM,KAAK;AAAA,IAC1C,KAAK;AAAA,IACL,aAAa,MAAM,aAAa,KAAK;AAAA,IACrC,KAAK,UAAU,MAAM,GAAG;AAAA,QACpB;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,EACX,EAAE;AAAA,UACF,CAAC,KAAK,OAAO,GAAG,mBAAmB,EAAE,iBAAiB,MAAM,SAAS,CAAC,GAAG,EAAE;AAAA,UAC3E,CAAC,KAAK,OAAO,GAAG,kBAAkB,EAAE,iBAAiB,MAAM,SAAS,CAAC,GAAG,EAAE;AAAA,QAC5E,EApBC,KAoBM;AAAA,QACP,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,KAAK,MAAM,qBAAqB,MAAM,MAAM,EAA5C,KAAmD;AAAA,QACtD,EAFC,KAEM;AAAA,MACT,EA/BC,MA+BO;AAAA,IACV,EAvCC;AAyCL;AAEA,IAAO,sBAAQ;","names":[],"file":"radioButton.jsx"}

package/dist/source/components/inputs/rating/rating.jsx CHANGED Viewed

@@ -1,9 +1,10 @@
 import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/rating/rating.entry.less";
-import { For, Show, children, createSignal, mergeProps, splitProps } from "solid-js";
+import { For, Show, createSignal, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Icon } from "../../base/icon";
 import { createControllableState } from "../../../primitives/createControllableState";
+import { createHelperText, hasHelperText } from "../../../primitives/createHelperText";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 function Rating(props) {
   const merged = mergeProps(
@@ -34,10 +35,12 @@ function Rating(props) {
     "error",
     "helperText",
     "id",
+    "aria-label",
+    "aria-describedby",
     "onChange",
     "ref"
   ]);
-  const helperText = children(() => local.helperText);
+  const helper = createHelperText(() => local.helperText, { describedBy: () => local["aria-describedby"] });
   const [current, setCurrent] = createControllableState({
     value: () => local.value,
     defaultValue: local.defaultValue,
@@ -77,45 +80,71 @@ function Rating(props) {
       commit(local.max);
     }
   };
+  const onStarMouseMove = (event, starIndex) => {
+    if (!interactive()) return;
+    setHover(local.precision === 0.5 ? valueFromEvent(event, starIndex) : starIndex + 1);
+  };
   const filledIcon = () => local.icon ?? <Icon name="star" fill={1} size={local.size} />;
   const blankIcon = () => local.emptyIcon ?? <Icon name="star" size={local.size} />;
+  const valueText = () => `${current()} of ${local.max}`;
+  const label = () => {
+    const rated = local["aria-label"];
+    if (!local.readOnly) return rated || "Rating";
+    return rated ? `${rated} ${valueText()}` : valueText();
+  };
   return <span
-    ref={mergeRefs(local.ref)}
-    id={local.id}
     class={cn(
       "smwb-rating",
       { "smwb-rating_readonly": local.readOnly, "smwb-rating_disabled": local.disabled, "smwb-rating_error": local.error },
       local.color !== "primary" && `smwb-rating_color-${local.color}`,
       local.class
     )}
+  >
+      <span
+    ref={mergeRefs(local.ref)}
+    id={local.id}
+    class="smwb-rating__control"
     data-testid="rating"
-    role="img"
-    aria-label={`${current()} of ${local.max}`}
+    role={local.readOnly ? "img" : "slider"}
+    aria-label={label()}
+    aria-valuemin={local.readOnly ? void 0 : 0}
+    aria-valuemax={local.readOnly ? void 0 : local.max}
+    aria-valuenow={local.readOnly ? void 0 : current()}
+    aria-valuetext={local.readOnly ? void 0 : valueText()}
+    aria-disabled={!local.readOnly && local.disabled ? true : void 0}
+    aria-describedby={helper.describedBy()}
     tabindex={interactive() ? 0 : void 0}
-    onKeyDown={interactive() ? handleKeyDown : void 0}
+    onKeyDown={handleKeyDown}
   >
-      <For each={Array.from({ length: local.max }, (_, index) => index)}>
-        {(index) => {
+        <For each={Array.from({ length: local.max }, (_, index) => index)}>
+          {(index) => {
     const fillRatio = () => Math.max(0, Math.min(1, display() - index));
     return <span
       class="smwb-rating__item"
-      style={{ width: `${local.size}px`, height: `${local.size}px`, cursor: interactive() ? "pointer" : "default" }}
+      style={{
+        width: `${local.size}px`,
+        height: `${local.size}px`,
+        cursor: interactive() ? "pointer" : "default"
+      }}
       onClick={(event) => handleSelect(event, index)}
-      onMouseMove={interactive() ? (event) => setHover(local.precision === 0.5 ? valueFromEvent(event, index) : index + 1) : void 0}
-      onMouseLeave={interactive() ? () => setHover(null) : void 0}
+      onMouseMove={(event) => onStarMouseMove(event, index)}
+      onMouseLeave={() => setHover(null)}
     >
-              <span class="smwb-rating__icon smwb-rating__icon_empty">{blankIcon()}</span>
-              <span class="smwb-rating__icon smwb-rating__icon_filled" style={{ width: `${fillRatio() * 100}%` }}>
-                {filledIcon()}
-              </span>
-            </span>;
+                <span class="smwb-rating__icon smwb-rating__icon_empty">{blankIcon()}</span>
+                <span class="smwb-rating__icon smwb-rating__icon_filled" style={{ width: `${fillRatio() * 100}%` }}>
+                  {filledIcon()}
+                </span>
+              </span>;
   }}
-      </For>
+        </For>
+      </span>
       <Show when={local.name}>
         <input type="hidden" name={local.name} value={current()} />
       </Show>
-      <Show when={helperText() != null && helperText() !== false}>
-        <span class={cn("smwb-rating__helper", local.error && "smwb-rating__helper_error")}>{helperText()}</span>
+      <Show when={hasHelperText(helper.text())}>
+        <span id={helper.id} class={cn("smwb-rating__helper", local.error && "smwb-rating__helper_error")}>
+          {helper.text()}
+        </span>
       </Show>
     </span>;
 }

package/dist/source/components/inputs/rating/rating.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/inputs/rating/rating.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/rating/rating.entry.less\";\nimport { type JSX, For, Show, children, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type RatingColor = \"primary\" \| \"secondary\" \| \"error\" \| \"success\" \| \"warning\" \| \"info\";\n\nexport interface RatingProps {\n class?: string;\n /** Controlled value. /\n value?: number;\n /* Uncontrolled initial value. /\n defaultValue?: number;\n /* Number of icons. /\n max?: number;\n /* Smallest selectable increment: 1 (whole) or 0.5 (half). /\n precision?: 1 \| 0.5;\n readOnly?: boolean;\n disabled?: boolean;\n size?: number;\n /* Filled icon. /\n icon?: JSX.Element;\n /* Empty icon. /\n emptyIcon?: JSX.Element;\n name?: string;\n /* Color of the filled icons. /\n color?: RatingColor;\n /* Renders the control in an error state. /\n error?: boolean;\n /* Supporting text shown below the control. /\n helperText?: JSX.Element;\n id?: string;\n onChange?: (value: number) => void;\n ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Rating(props: RatingProps): JSX.Element {\n const merged = mergeProps(\n {\n defaultValue: 0,\n max: 5,\n precision: 1 as 1 \| 0.5,\n readOnly: false,\n disabled: false,\n size: 28,\n color: \"primary\" as RatingColor,\n },\n props\n );\n const [local] = splitProps(merged, [\n \"class\",\n \"value\",\n \"defaultValue\",\n \"max\",\n \"precision\",\n \"readOnly\",\n \"disabled\",\n \"size\",\n \"icon\",\n \"emptyIcon\",\n \"name\",\n \"color\",\n \"error\",\n \"helperText\",\n \"id\",\n \"onChange\",\n \"ref\",\n ]);\n // Read once: markup passed as a prop is created anew on every read, and\n // during hydration a copy the server never rendered has no DOM node.\n const helperText = children(() => local.helperText);\n\n const [current, setCurrent] = createControllableState<number>({\n value: () => local.value,\n defaultValue: local.defaultValue,\n onChange: (next) => local.onChange?.(next),\n });\n const [hover, setHover] = createSignal<number \| null>(null);\n\n const display = (): number => hover() ?? current();\n const interactive = (): boolean => !local.readOnly && !local.disabled;\n\n const valueFromEvent = (event: MouseEvent & { currentTarget: HTMLSpanElement }, starIndex: number): number => {\n if (local.precision === 1) {\n return starIndex + 1;\n }\n const { left, width } = event.currentTarget.getBoundingClientRect();\n const isLeftHalf = event.clientX - left < width / 2;\n return starIndex + (isLeftHalf ? 0.5 : 1);\n };\n\n const handleSelect = (event: MouseEvent & { currentTarget: HTMLSpanElement }, starIndex: number): void => {\n if (!interactive()) return;\n setCurrent(valueFromEvent(event, starIndex));\n };\n\n const commit = (next: number): void => {\n setCurrent(Math.max(0, Math.min(local.max, next)));\n };\n\n const handleKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n if (!interactive()) return;\n if (event.key === \"ArrowRight\" \|\| event.key === \"ArrowUp\") {\n event.preventDefault();\n commit(current() + local.precision);\n } else if (event.key === \"ArrowLeft\" \|\| event.key === \"ArrowDown\") {\n event.preventDefault();\n commit(current() - local.precision);\n } else if (event.key === \"Home\") {\n event.preventDefault();\n commit(0);\n } else if (event.key === \"End\") {\n event.preventDefault();\n commit(local.max);\n }\n };\n\n const filledIcon = (): JSX.Element => local.icon ?? <Icon name=\"star\" fill={1} size={local.size} />;\n const blankIcon = (): JSX.Element => local.emptyIcon ?? <Icon name=\"star\" size={local.size} />;\n\n return (\n <span\n ref={mergeRefs(local.ref)}\n id={local.id}\n class={cn(\n \"smwb-rating\",\n { \"smwb-rating_readonly\": local.readOnly, \"smwb-rating_disabled\": local.disabled, \"smwb-rating_error\": local.error },\n local.color !== \"primary\" && `smwb-rating_color-${local.color}`,\n local.class\n )}\n data-testid=\"rating\"\n role=\"img\"\n aria-label={`${current()} of ${local.max}`}\n tabindex={interactive() ? 0 : undefined}\n onKeyDown={interactive() ? handleKeyDown : undefined}\n >\n <For each={Array.from({ length: local.max }, (_, index) => index)}>\n {(index) => {\n const fillRatio = (): number => Math.max(0, Math.min(1, display() - index));\n return (\n <span\n class=\"smwb-rating__item\"\n style={{ width: `${local.size}px`, height: `${local.size}px`, cursor: interactive() ? \"pointer\" : \"default\" }}\n onClick={(event) => handleSelect(event, index)}\n onMouseMove={\n interactive()\n ? (event) => setHover(local.precision === 0.5 ? valueFromEvent(event, index) : index + 1)\n : undefined\n }\n onMouseLeave={interactive() ? () => setHover(null) : undefined}\n >\n <span class=\"smwb-rating__icon smwb-rating__icon_empty\">{blankIcon()}</span>\n <span class=\"smwb-rating__icon smwb-rating__icon_filled\" style={{ width: `${fillRatio() 100}%` }}>\n {filledIcon()}\n </span>\n </span>\n );\n }}\n </For>\n <Show when={local.name}>\n <input type=\"hidden\" name={local.name} value={current()} />\n </Show>\n <Show when={helperText() != null && (helperText() as unknown) !== false}>\n <span class={cn(\"smwb-rating__helper\", local.error && \"smwb-rating__helper_error\")}>{helperText()}</span>\n </Show>\n </span>\n );\n}\n\nexport default Rating;\n"],"mappings":"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","names":[],"file":"rating.jsx"}
1	+ {"version":3,"sources":["../../../../../src/components/inputs/rating/rating.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/rating/rating.entry.less\";\nimport { type JSX, For, Show, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createHelperText, hasHelperText } from \"../../../primitives/createHelperText\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type RatingColor = \"primary\" \| \"secondary\" \| \"error\" \| \"success\" \| \"warning\" \| \"info\";\n\nexport interface RatingProps {\n class?: string;\n /** Controlled value. /\n value?: number;\n /* Uncontrolled initial value. /\n defaultValue?: number;\n /* Number of icons. /\n max?: number;\n /* Smallest selectable increment: 1 (whole) or 0.5 (half). /\n precision?: 1 \| 0.5;\n readOnly?: boolean;\n disabled?: boolean;\n size?: number;\n /* Filled icon. /\n icon?: JSX.Element;\n /* Empty icon. /\n emptyIcon?: JSX.Element;\n name?: string;\n /* Color of the filled icons. /\n color?: RatingColor;\n /* Renders the control in an error state. /\n error?: boolean;\n /* Supporting text shown below the control. /\n helperText?: JSX.Element;\n /* Id of the control: the slider, or the image of a read-only rating. /\n id?: string;\n /\n What is rated: the accessible name of the slider, \"Rating\" by default. A read-only rating is an image named by\n * its value (\"3 of 5\"), after this label.\n /\n \"aria-label\"?: string;\n /* Ids of more elements that describe the control, after its helper text. /\n \"aria-describedby\"?: string;\n onChange?: (value: number) => void;\n /* The control: the slider, or the image of a read-only rating. /\n ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Rating(props: RatingProps): JSX.Element {\n const merged = mergeProps(\n {\n defaultValue: 0,\n max: 5,\n precision: 1 as 1 \| 0.5,\n readOnly: false,\n disabled: false,\n size: 28,\n color: \"primary\" as RatingColor,\n },\n props\n );\n const [local] = splitProps(merged, [\n \"class\",\n \"value\",\n \"defaultValue\",\n \"max\",\n \"precision\",\n \"readOnly\",\n \"disabled\",\n \"size\",\n \"icon\",\n \"emptyIcon\",\n \"name\",\n \"color\",\n \"error\",\n \"helperText\",\n \"id\",\n \"aria-label\",\n \"aria-describedby\",\n \"onChange\",\n \"ref\",\n ]);\n // Reads the helper text once: markup passed as a prop is created anew on\n // every read, and during hydration a copy the server never rendered has no DOM\n // node. The rating draws any helper text it is given, so the read creates\n // nothing that is not drawn.\n const helper = createHelperText(() => local.helperText, { describedBy: () => local[\"aria-describedby\"] });\n\n const [current, setCurrent] = createControllableState<number>({\n value: () => local.value,\n defaultValue: local.defaultValue,\n onChange: (next) => local.onChange?.(next),\n });\n const [hover, setHover] = createSignal<number \| null>(null);\n\n const display = (): number => hover() ?? current();\n const interactive = (): boolean => !local.readOnly && !local.disabled;\n\n const valueFromEvent = (event: MouseEvent & { currentTarget: HTMLSpanElement }, starIndex: number): number => {\n if (local.precision === 1) {\n return starIndex + 1;\n }\n const { left, width } = event.currentTarget.getBoundingClientRect();\n const isLeftHalf = event.clientX - left < width / 2;\n return starIndex + (isLeftHalf ? 0.5 : 1);\n };\n\n const handleSelect = (event: MouseEvent & { currentTarget: HTMLSpanElement }, starIndex: number): void => {\n if (!interactive()) return;\n setCurrent(valueFromEvent(event, starIndex));\n };\n\n const commit = (next: number): void => {\n setCurrent(Math.max(0, Math.min(local.max, next)));\n };\n\n const handleKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n if (!interactive()) return;\n if (event.key === \"ArrowRight\" \|\| event.key === \"ArrowUp\") {\n event.preventDefault();\n commit(current() + local.precision);\n } else if (event.key === \"ArrowLeft\" \|\| event.key === \"ArrowDown\") {\n event.preventDefault();\n commit(current() - local.precision);\n } else if (event.key === \"Home\") {\n event.preventDefault();\n commit(0);\n } else if (event.key === \"End\") {\n event.preventDefault();\n commit(local.max);\n }\n };\n\n // Solid binds event handlers once, so they are always attached and check\n // `interactive()` themselves (handleKeyDown too): a rating can turn read-only,\n // or back, after it renders. Leaving always clears the preview, so a rating\n // that turns read-only while hovered does not keep it.\n const onStarMouseMove = (event: MouseEvent & { currentTarget: HTMLSpanElement }, starIndex: number): void => {\n if (!interactive()) return;\n setHover(local.precision === 0.5 ? valueFromEvent(event, starIndex) : starIndex + 1);\n };\n\n const filledIcon = (): JSX.Element => local.icon ?? <Icon name=\"star\" fill={1} size={local.size} />;\n const blankIcon = (): JSX.Element => local.emptyIcon ?? <Icon name=\"star\" size={local.size} />;\n\n const valueText = (): string => `${current()} of ${local.max}`;\n // The slider is named by what is rated. An image has no value, so its name\n // carries the value too.\n const label = (): string => {\n const rated = local[\"aria-label\"];\n if (!local.readOnly) return rated \|\| \"Rating\";\n return rated ? `${rated} ${valueText()}` : valueText();\n };\n\n // The control is a slider, or an image named by its value when the rating is\n // read-only. The helper text stays outside it: the children of a slider or an\n // image are presentational, so assistive technology would never read it.\n return (\n <span\n class={cn(\n \"smwb-rating\",\n { \"smwb-rating_readonly\": local.readOnly, \"smwb-rating_disabled\": local.disabled, \"smwb-rating_error\": local.error },\n local.color !== \"primary\" && `smwb-rating_color-${local.color}`,\n local.class\n )}\n >\n <span\n ref={mergeRefs(local.ref)}\n id={local.id}\n class=\"smwb-rating__control\"\n data-testid=\"rating\"\n role={local.readOnly ? \"img\" : \"slider\"}\n aria-label={label()}\n aria-valuemin={local.readOnly ? undefined : 0}\n aria-valuemax={local.readOnly ? undefined : local.max}\n aria-valuenow={local.readOnly ? undefined : current()}\n aria-valuetext={local.readOnly ? undefined : valueText()}\n aria-disabled={!local.readOnly && local.disabled ? true : undefined}\n aria-describedby={helper.describedBy()}\n tabindex={interactive() ? 0 : undefined}\n onKeyDown={handleKeyDown}\n >\n <For each={Array.from({ length: local.max }, (_, index) => index)}>\n {(index) => {\n const fillRatio = (): number => Math.max(0, Math.min(1, display() - index));\n return (\n <span\n class=\"smwb-rating__item\"\n style={{\n width: `${local.size}px`,\n height: `${local.size}px`,\n cursor: interactive() ? \"pointer\" : \"default\",\n }}\n onClick={(event) => handleSelect(event, index)}\n onMouseMove={(event) => onStarMouseMove(event, index)}\n onMouseLeave={() => setHover(null)}\n >\n <span class=\"smwb-rating__icon smwb-rating__icon_empty\">{blankIcon()}</span>\n <span class=\"smwb-rating__icon smwb-rating__icon_filled\" style={{ width: `${fillRatio() 100}%` }}>\n {filledIcon()}\n </span>\n </span>\n );\n }}\n </For>\n </span>\n <Show when={local.name}>\n <input type=\"hidden\" name={local.name} value={current()} />\n </Show>\n <Show when={hasHelperText(helper.text())}>\n <span id={helper.id} class={cn(\"smwb-rating__helper\", local.error && \"smwb-rating__helper_error\")}>\n {helper.text()}\n </span>\n </Show>\n </span>\n );\n}\n\nexport default Rating;\n"],"mappings":"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","names":[],"file":"rating.jsx"}