@frontify/fondue 9.11.0 → 9.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,36 +1,36 @@
1
- import { MenuItem as g } from "../../MenuItem/MenuItem.es.js";
2
- import { Switch as k, SwitchSize as v } from "../../Switch/Switch.es.js";
3
- import { useFocusRing as E } from "@react-aria/focus";
4
- import { useMenuItem as V } from "@react-aria/menu";
5
- import { mergeProps as A } from "@react-aria/utils";
1
+ import { MenuItem as k } from "../../MenuItem/MenuItem.es.js";
2
+ import { Switch as v, SwitchSize as E } from "../../Switch/Switch.es.js";
3
+ import { useFocusRing as V } from "@react-aria/focus";
4
+ import { useMenuItem as A } from "@react-aria/menu";
5
+ import { mergeProps as P } from "@react-aria/utils";
6
6
  import { FOCUS_STYLE_INSET as z } from "../../../utilities/focusStyle.es.js";
7
7
  import { merge as F } from "../../../utilities/merge.es.js";
8
- import c, { useRef as P, useState as R } from "react";
9
- const x = (t) => typeof t.onClick < "u" && typeof t.type > "u", a = (t) => typeof t.onClick < "u" && t.type === "switch", N = (t) => {
10
- const [o, i] = R(t), s = () => i(!o);
8
+ import n, { useRef as R, useState as x } from "react";
9
+ const N = (t) => typeof t.onClick < "u" && typeof t.type > "u", a = (t) => typeof t.onClick < "u" && t.type === "switch", T = (t) => {
10
+ const [o, i] = x(t), s = () => i(!o);
11
11
  return {
12
- switchComponent: /* @__PURE__ */ c.createElement(k, {
13
- size: v.Small,
12
+ switchComponent: /* @__PURE__ */ n.createElement(v, {
13
+ size: E.Small,
14
14
  on: o
15
15
  }),
16
16
  switchValue: o,
17
17
  toggleSwitch: s
18
18
  };
19
- }, j = ({ menuItem: t, node: o, state: i, isSelected: s, onClick: n }) => {
20
- const l = P(null), {
19
+ }, q = ({ menuItem: t, node: o, state: i, isSelected: s, onClick: e }) => {
20
+ const l = R(null), {
21
21
  switchComponent: p = void 0,
22
22
  switchValue: f = null,
23
- toggleSwitch: e = null
24
- } = a(t) ? N(t.initialValue) : {}, { menuItemProps: w } = V({
23
+ toggleSwitch: c = null
24
+ } = a(t) ? T(t.initialValue) : {}, { menuItemProps: w } = A({
25
25
  ...o,
26
26
  onAction: () => {
27
- x(t) && t.onClick(), a(t) && (e == null || e(), t.onClick(Boolean(!f)));
27
+ N(t) && t.onClick(), a(t) && (c == null || c(), t.onClick(Boolean(!f)));
28
28
  },
29
29
  isDisabled: (t == null ? void 0 : t.disabled) || !1,
30
30
  "aria-label": typeof (t == null ? void 0 : t.title) == "string" ? t == null ? void 0 : t.title : "Menu item"
31
- }, i, l), { title: d, decorator: h, subtitle: S, size: b, style: C, disabled: r, selectionIndicator: u } = t, { isFocusVisible: y, focusProps: M } = E();
32
- return /* @__PURE__ */ c.createElement("li", {
33
- ...A(w, M),
31
+ }, i, l), { title: d, decorator: h, subtitle: S, size: b, style: C, disabled: r, selectionIndicator: u } = t, { isFocusVisible: y, focusProps: g } = V();
32
+ return /* @__PURE__ */ n.createElement("li", {
33
+ ...P(w, g),
34
34
  "data-test-id": "menu-item",
35
35
  className: F([
36
36
  "tw-relative hover:tw-bg-black-0 tw-list-none tw-outline-none",
@@ -38,8 +38,10 @@ const x = (t) => typeof t.onClick < "u" && typeof t.type > "u", a = (t) => typeo
38
38
  y && z
39
39
  ]),
40
40
  ref: l,
41
- onClick: n
42
- }, /* @__PURE__ */ c.createElement(g, {
41
+ onClick: (M) => {
42
+ M.stopPropagation(), e && e();
43
+ }
44
+ }, /* @__PURE__ */ n.createElement(k, {
43
45
  title: d,
44
46
  decorator: h,
45
47
  subtitle: S,
@@ -52,6 +54,6 @@ const x = (t) => typeof t.onClick < "u" && typeof t.type > "u", a = (t) => typeo
52
54
  }));
53
55
  };
54
56
  export {
55
- j as AriaMenuItem
57
+ q as AriaMenuItem
56
58
  };
57
59
  //# sourceMappingURL=AriaMenuItem.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AriaMenuItem.es.js","sources":["../../../../src/components/ActionMenu/Aria/AriaMenuItem.tsx"],"sourcesContent":["import { MenuItem } from '@components/MenuItem/MenuItem';\nimport { Switch, SwitchSize } from '@components/Switch';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useMenuItem } from '@react-aria/menu';\nimport { mergeProps } from '@react-aria/utils';\nimport { TreeState } from '@react-stately/tree';\nimport { Node } from '@react-types/shared';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, useRef, useState } from 'react';\nimport { MenuItemType } from '../../Dropdown/SelectMenu/SelectMenu';\nimport { ActionMenuItemType, ActionMenuSwitchItemType } from '../ActionMenu/ActionMenu';\n\nexport type AriaOptionProps = {\n menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType;\n node: Node<object>;\n isSelected?: boolean;\n state: TreeState<object>;\n onClick?: () => void;\n};\n\nconst isActionMenuItem = (\n menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType,\n): menuItem is ActionMenuItemType =>\n typeof (menuItem as ActionMenuItemType).onClick !== 'undefined' && typeof menuItem.type === 'undefined';\nconst isActionMenuSwitchItem = (\n menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType,\n): menuItem is ActionMenuSwitchItemType =>\n typeof (menuItem as ActionMenuSwitchItemType).onClick !== 'undefined' && menuItem.type === 'switch';\n\nconst useSwitch = (initialValue: boolean) => {\n const [switchValue, setSwitchValue] = useState<boolean>(initialValue);\n const toggleSwitch = () => setSwitchValue(!switchValue);\n const switchComponent = <Switch size={SwitchSize.Small} on={switchValue} />;\n\n return {\n switchComponent,\n switchValue,\n toggleSwitch,\n };\n};\n\nexport const AriaMenuItem: FC<AriaOptionProps> = ({ menuItem, node, state, isSelected, onClick }) => {\n const ref = useRef<HTMLLIElement | null>(null);\n const {\n switchComponent = undefined,\n switchValue = null,\n toggleSwitch = null,\n } = isActionMenuSwitchItem(menuItem) ? useSwitch(menuItem.initialValue) : {};\n\n const { menuItemProps } = useMenuItem(\n {\n ...node,\n onAction: () => {\n if (isActionMenuItem(menuItem)) {\n menuItem.onClick();\n }\n if (isActionMenuSwitchItem(menuItem)) {\n toggleSwitch?.();\n menuItem.onClick(Boolean(!switchValue));\n }\n },\n isDisabled: menuItem?.disabled || false,\n 'aria-label': typeof menuItem?.title === 'string' ? menuItem?.title : 'Menu item',\n },\n state,\n ref,\n );\n const { title, decorator, subtitle, size, style, disabled, selectionIndicator } = menuItem;\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions\n <li\n {...mergeProps(menuItemProps, focusProps)}\n data-test-id=\"menu-item\"\n className={merge([\n 'tw-relative hover:tw-bg-black-0 tw-list-none tw-outline-none',\n disabled && 'tw-pointer-events-none tw-top-px',\n isFocusVisible && FOCUS_STYLE_INSET,\n ])}\n ref={ref}\n onClick={onClick}\n >\n <MenuItem\n title={title}\n decorator={decorator}\n subtitle={subtitle}\n size={size}\n style={style}\n disabled={disabled}\n active={isSelected}\n selectionIndicator={selectionIndicator}\n switchComponent={switchComponent}\n />\n </li>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAqBA,MAAM,IAAmB,CACrB,MAEA,OAAQ,EAAgC,UAAY,OAAe,OAAO,EAAS,OAAS,KAC1F,IAAyB,CAC3B,MAEA,OAAQ,EAAsC,UAAY,OAAe,EAAS,SAAS,UAEzF,IAAY,CAAC,MAA0B;AACzC,QAAM,CAAC,GAAa,KAAkB,EAAkB,CAAY,GAC9D,IAAe,MAAM,EAAe,CAAC,CAAW;AAG/C,SAAA;AAAA,IACH,iBAHqB,kBAAA,cAAA,GAAA;AAAA,MAAO,MAAM,EAAW;AAAA,MAAO,IAAI;AAAA,IAAA,CAAa;AAAA,IAIrE;AAAA,IACA;AAAA,EAAA;AAER,GAEa,IAAoC,CAAC,EAAE,aAAU,SAAM,UAAO,eAAY,iBAAc;AAC3F,QAAA,IAAM,EAA6B,IAAI,GACvC;AAAA,IACF,qBAAkB;AAAA,IAClB,iBAAc;AAAA,IACd,kBAAe;AAAA,MACf,EAAuB,CAAQ,IAAI,EAAU,EAAS,YAAY,IAAI,IAEpE,EAAE,qBAAkB,EACtB;AAAA,IACI,GAAG;AAAA,IACH,UAAU,MAAM;AACR,MAAA,EAAiB,CAAQ,KACzB,EAAS,QAAQ,GAEjB,EAAuB,CAAQ,KAChB,mBACf,EAAS,QAAQ,QAAQ,CAAC,CAAW,CAAC;AAAA,IAE9C;AAAA,IACA,YAAY,wBAAU,aAAY;AAAA,IAClC,cAAc,OAAO,wBAAU,UAAU,WAAW,uBAAU,QAAQ;AAAA,EAAA,GAE1E,GACA,CACJ,GACM,EAAE,UAAO,cAAW,aAAU,SAAM,UAAO,aAAU,0BAAuB,GAC5E,EAAE,mBAAgB,kBAAe,EAAa;AAEpD,SAEK,kBAAA,cAAA,MAAA;AAAA,IACI,GAAG,EAAW,GAAe,CAAU;AAAA,IACxC,gBAAa;AAAA,IACb,WAAW,EAAM;AAAA,MACb;AAAA,MACA,KAAY;AAAA,MACZ,KAAkB;AAAA,IAAA,CACrB;AAAA,IACD;AAAA,IACA;AAAA,EAAA,GAEC,kBAAA,cAAA,GAAA;AAAA,IACG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACJ,CAAA,CACJ;AAER;"}
1
+ {"version":3,"file":"AriaMenuItem.es.js","sources":["../../../../src/components/ActionMenu/Aria/AriaMenuItem.tsx"],"sourcesContent":["import { MenuItem } from '@components/MenuItem/MenuItem';\nimport { Switch, SwitchSize } from '@components/Switch';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useMenuItem } from '@react-aria/menu';\nimport { mergeProps } from '@react-aria/utils';\nimport { TreeState } from '@react-stately/tree';\nimport { Node } from '@react-types/shared';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, useRef, useState } from 'react';\nimport { MenuItemType } from '../../Dropdown/SelectMenu/SelectMenu';\nimport { ActionMenuItemType, ActionMenuSwitchItemType } from '../ActionMenu/ActionMenu';\n\nexport type AriaOptionProps = {\n menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType;\n node: Node<object>;\n isSelected?: boolean;\n state: TreeState<object>;\n onClick?: () => void;\n};\n\nconst isActionMenuItem = (\n menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType,\n): menuItem is ActionMenuItemType =>\n typeof (menuItem as ActionMenuItemType).onClick !== 'undefined' && typeof menuItem.type === 'undefined';\nconst isActionMenuSwitchItem = (\n menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType,\n): menuItem is ActionMenuSwitchItemType =>\n typeof (menuItem as ActionMenuSwitchItemType).onClick !== 'undefined' && menuItem.type === 'switch';\n\nconst useSwitch = (initialValue: boolean) => {\n const [switchValue, setSwitchValue] = useState<boolean>(initialValue);\n const toggleSwitch = () => setSwitchValue(!switchValue);\n const switchComponent = <Switch size={SwitchSize.Small} on={switchValue} />;\n\n return {\n switchComponent,\n switchValue,\n toggleSwitch,\n };\n};\n\nexport const AriaMenuItem: FC<AriaOptionProps> = ({ menuItem, node, state, isSelected, onClick }) => {\n const ref = useRef<HTMLLIElement | null>(null);\n const {\n switchComponent = undefined,\n switchValue = null,\n toggleSwitch = null,\n } = isActionMenuSwitchItem(menuItem) ? useSwitch(menuItem.initialValue) : {};\n\n const { menuItemProps } = useMenuItem(\n {\n ...node,\n onAction: () => {\n if (isActionMenuItem(menuItem)) {\n menuItem.onClick();\n }\n if (isActionMenuSwitchItem(menuItem)) {\n toggleSwitch?.();\n menuItem.onClick(Boolean(!switchValue));\n }\n },\n isDisabled: menuItem?.disabled || false,\n 'aria-label': typeof menuItem?.title === 'string' ? menuItem?.title : 'Menu item',\n },\n state,\n ref,\n );\n const { title, decorator, subtitle, size, style, disabled, selectionIndicator } = menuItem;\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions\n <li\n {...mergeProps(menuItemProps, focusProps)}\n data-test-id=\"menu-item\"\n className={merge([\n 'tw-relative hover:tw-bg-black-0 tw-list-none tw-outline-none',\n disabled && 'tw-pointer-events-none tw-top-px',\n isFocusVisible && FOCUS_STYLE_INSET,\n ])}\n ref={ref}\n onClick={(event) => {\n event.stopPropagation();\n if (onClick) {\n onClick();\n }\n }}\n >\n <MenuItem\n title={title}\n decorator={decorator}\n subtitle={subtitle}\n size={size}\n style={style}\n disabled={disabled}\n active={isSelected}\n selectionIndicator={selectionIndicator}\n switchComponent={switchComponent}\n />\n </li>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAqBA,MAAM,IAAmB,CACrB,MAEA,OAAQ,EAAgC,UAAY,OAAe,OAAO,EAAS,OAAS,KAC1F,IAAyB,CAC3B,MAEA,OAAQ,EAAsC,UAAY,OAAe,EAAS,SAAS,UAEzF,IAAY,CAAC,MAA0B;AACzC,QAAM,CAAC,GAAa,KAAkB,EAAkB,CAAY,GAC9D,IAAe,MAAM,EAAe,CAAC,CAAW;AAG/C,SAAA;AAAA,IACH,iBAHqB,kBAAA,cAAA,GAAA;AAAA,MAAO,MAAM,EAAW;AAAA,MAAO,IAAI;AAAA,IAAA,CAAa;AAAA,IAIrE;AAAA,IACA;AAAA,EAAA;AAER,GAEa,IAAoC,CAAC,EAAE,aAAU,SAAM,UAAO,eAAY,iBAAc;AAC3F,QAAA,IAAM,EAA6B,IAAI,GACvC;AAAA,IACF,qBAAkB;AAAA,IAClB,iBAAc;AAAA,IACd,kBAAe;AAAA,MACf,EAAuB,CAAQ,IAAI,EAAU,EAAS,YAAY,IAAI,IAEpE,EAAE,qBAAkB,EACtB;AAAA,IACI,GAAG;AAAA,IACH,UAAU,MAAM;AACR,MAAA,EAAiB,CAAQ,KACzB,EAAS,QAAQ,GAEjB,EAAuB,CAAQ,KAChB,mBACf,EAAS,QAAQ,QAAQ,CAAC,CAAW,CAAC;AAAA,IAE9C;AAAA,IACA,YAAY,wBAAU,aAAY;AAAA,IAClC,cAAc,OAAO,wBAAU,UAAU,WAAW,uBAAU,QAAQ;AAAA,EAAA,GAE1E,GACA,CACJ,GACM,EAAE,UAAO,cAAW,aAAU,SAAM,UAAO,aAAU,0BAAuB,GAC5E,EAAE,mBAAgB,kBAAe,EAAa;AAEpD,SAEK,kBAAA,cAAA,MAAA;AAAA,IACI,GAAG,EAAW,GAAe,CAAU;AAAA,IACxC,gBAAa;AAAA,IACb,WAAW,EAAM;AAAA,MACb;AAAA,MACA,KAAY;AAAA,MACZ,KAAkB;AAAA,IAAA,CACrB;AAAA,IACD;AAAA,IACA,SAAS,CAAC,MAAU;AAChB,QAAM,gBAAgB,GAClB,KACQ;IAEhB;AAAA,EAAA,GAEC,kBAAA,cAAA,GAAA;AAAA,IACG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACJ,CAAA,CACJ;AAER;"}
@@ -7,12 +7,12 @@ import { InputLabel as E } from "../InputLabel/InputLabel.es.js";
7
7
  var F = /* @__PURE__ */ ((e) => (e.Small = "Small", e.Medium = "Medium", e.Large = "Large", e))(F || {});
8
8
  const y = {
9
9
  Small: "tw-w-5 tw-h-2",
10
- Medium: "tw-w-9 tw-h-5",
11
- Large: "tw-w-11 tw-h-6"
10
+ Medium: "tw-w-7 tw-h-4",
11
+ Large: "tw-w-9 tw-h-5"
12
12
  }, N = {
13
13
  Small: "tw-w-3 tw-h-3",
14
- Medium: "tw-w-4 tw-h-4",
15
- Large: "tw-w-5 tw-h-5"
14
+ Medium: "tw-w-3 tw-h-3",
15
+ Large: "tw-w-4 tw-h-4"
16
16
  }, U = ({
17
17
  id: e,
18
18
  name: b,
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.es.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, MouseEvent, useMemo } from 'react';\nimport { merge } from '@utilities/merge';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { InputLabel, InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\n\nexport enum SwitchSize {\n Small = 'Small',\n Medium = 'Medium',\n Large = 'Large',\n}\n\nconst lineSizeClasses: Record<SwitchSize, string> = {\n [SwitchSize.Small]: 'tw-w-5 tw-h-2',\n [SwitchSize.Medium]: 'tw-w-9 tw-h-5',\n [SwitchSize.Large]: 'tw-w-11 tw-h-6',\n};\n\nconst dotSizeClasses: Record<SwitchSize, string> = {\n [SwitchSize.Small]: 'tw-w-3 tw-h-3',\n [SwitchSize.Medium]: 'tw-w-4 tw-h-4',\n [SwitchSize.Large]: 'tw-w-5 tw-h-5',\n};\n\nexport type SwitchProps = {\n id?: string;\n on?: boolean;\n disabled?: boolean;\n label?: string;\n name?: string;\n size?: SwitchSize;\n hug?: boolean;\n tooltip?: InputLabelTooltipProps;\n onChange?: (e: MouseEvent) => void;\n};\n\nexport const Switch: FC<SwitchProps> = ({\n id: propId,\n name,\n label,\n disabled,\n onChange,\n size = SwitchSize.Medium,\n on = false,\n hug = false,\n tooltip,\n}) => {\n const id = useMemoizedId(propId);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const lineClasses = useMemo(() => {\n const baseClasses = 'tw-inline-flex tw-border-0 tw-rounded-full tw-transition-colors tw-shrink-0';\n const sizeClasses = size !== SwitchSize.Small ? 'tw-py-0 tw-px-[0.125rem]' : 'tw-p-0';\n const activatedClasses = on ? 'tw-bg-black-90 hover:tw-bg-black' : 'tw-bg-black-30 hover:tw-bg-black-60';\n const disabledClasses = disabled ? 'tw-bg-black-10 tw-pointer-events-none' : activatedClasses;\n\n return merge([baseClasses, sizeClasses, disabledClasses, lineSizeClasses[size], isFocusVisible && FOCUS_STYLE]);\n }, [on, disabled, size, isFocusVisible]);\n\n const dotClasses = useMemo(() => {\n const baseClasses = 'tw-block tw-self-center tw-bg-white tw-rounded-full tw-transition-transform';\n const disabledClasses = disabled ? 'tw-border tw-border-black-30' : 'tw-border tw-border-black';\n const sizeClasses = size === SwitchSize.Small ? disabledClasses : '';\n const activatedClasses = size === SwitchSize.Small ? 'tw-translate-x-2' : 'tw-translate-x-full';\n const animationClasses = on ? activatedClasses : 'tw-translate-x-0';\n\n return merge([baseClasses, sizeClasses, dotSizeClasses[size], animationClasses]);\n }, [on, disabled, size]);\n\n const containerClasses = useMemo(() => {\n return merge(['tw-gap-2 tw-items-center tw-justify-between', hug ? 'tw-inline-flex' : 'tw-flex']);\n }, [hug]);\n\n return (\n <div className={containerClasses} data-test-id=\"switch-container\">\n {label && (\n <InputLabel clickable={true} htmlFor={id} disabled={disabled} tooltip={tooltip}>\n {label}\n </InputLabel>\n )}\n <button\n {...focusProps}\n id={id}\n disabled={disabled}\n name={name}\n data-test-id=\"switch\"\n className={lineClasses}\n value={on.toString()}\n onClick={onChange}\n type=\"button\"\n >\n <div className={dotClasses} />\n </button>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;AASY,IAAA,sBAAA,MACA,GAAA,QAAA,SACC,EAAA,SAAA,UACD,EAAA,QAAA,SAHA,IAAA,KAAA,CAAA,CAAA;AAMZ,MAAM,IAA8C;AAAA,EAChD,AAAC,OAAmB;AAAA,EACpB,AAAC,QAAoB;AAAA,EACrB,AAAC,OAAmB;AACxB,GAEM,IAA6C;AAAA,EAC/C,AAAC,OAAmB;AAAA,EACpB,AAAC,QAAoB;AAAA,EACrB,AAAC,OAAmB;AACxB,GAca,IAA0B,CAAC;AAAA,EACpC,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAO;AAAA,EACP,QAAK;AAAA,EACL,SAAM;AAAA,EACN;AAAA,MACE;AACI,QAAA,IAAK,EAAc,CAAM,GACzB,EAAE,mBAAgB,kBAAe,EAAa,GAE9C,IAAc,EAAQ,MAMjB,EAAM,CALO,+EACA,MAAS,UAAmB,6BAA6B,UAErD,IAAW,0CADV,IAAK,qCAAqC,uCAGV,EAAgB,IAAO,KAAkB,CAAW,CAAC,GAC/G,CAAC,GAAI,GAAU,GAAM,CAAc,CAAC,GAEjC,IAAa,EAAQ,MAAM;AAC7B,UAAM,IAAc,+EAEd,IAAc,MAAS,UADL,IAAW,iCAAiC,8BACF,IAE5D,IAAmB,IADA,MAAS,UAAmB,qBAAqB,wBACzB;AAEjD,WAAO,EAAM,CAAC,GAAa,GAAa,EAAe,IAAO,CAAgB,CAAC;AAAA,EAChF,GAAA,CAAC,GAAI,GAAU,CAAI,CAAC,GAEjB,IAAmB,EAAQ,MACtB,EAAM,CAAC,+CAA+C,IAAM,mBAAmB,SAAS,CAAC,GACjG,CAAC,CAAG,CAAC;AAER,SACK,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAW;AAAA,IAAkB,gBAAa;AAAA,EAAA,GAC1C,KACI,kBAAA,cAAA,GAAA;AAAA,IAAW,WAAW;AAAA,IAAM,SAAS;AAAA,IAAI;AAAA,IAAoB;AAAA,EACzD,GAAA,CACL,GAEH,kBAAA,cAAA,UAAA;AAAA,IACI,GAAG;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAa;AAAA,IACb,WAAW;AAAA,IACX,OAAO,EAAG,SAAS;AAAA,IACnB,SAAS;AAAA,IACT,MAAK;AAAA,EAAA,GAEJ,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAW;AAAA,EAAY,CAAA,CAChC,CACJ;AAER;"}
1
+ {"version":3,"file":"Switch.es.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, MouseEvent, useMemo } from 'react';\nimport { merge } from '@utilities/merge';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { InputLabel, InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\n\nexport enum SwitchSize {\n Small = 'Small',\n Medium = 'Medium',\n Large = 'Large',\n}\n\nconst lineSizeClasses: Record<SwitchSize, string> = {\n [SwitchSize.Small]: 'tw-w-5 tw-h-2',\n [SwitchSize.Medium]: 'tw-w-7 tw-h-4',\n [SwitchSize.Large]: 'tw-w-9 tw-h-5',\n};\n\nconst dotSizeClasses: Record<SwitchSize, string> = {\n [SwitchSize.Small]: 'tw-w-3 tw-h-3',\n [SwitchSize.Medium]: 'tw-w-3 tw-h-3',\n [SwitchSize.Large]: 'tw-w-4 tw-h-4',\n};\n\nexport type SwitchProps = {\n id?: string;\n on?: boolean;\n disabled?: boolean;\n label?: string;\n name?: string;\n size?: SwitchSize;\n hug?: boolean;\n tooltip?: InputLabelTooltipProps;\n onChange?: (e: MouseEvent) => void;\n};\n\nexport const Switch: FC<SwitchProps> = ({\n id: propId,\n name,\n label,\n disabled,\n onChange,\n size = SwitchSize.Medium,\n on = false,\n hug = false,\n tooltip,\n}) => {\n const id = useMemoizedId(propId);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const lineClasses = useMemo(() => {\n const baseClasses = 'tw-inline-flex tw-border-0 tw-rounded-full tw-transition-colors tw-shrink-0';\n const sizeClasses = size !== SwitchSize.Small ? 'tw-py-0 tw-px-[0.125rem]' : 'tw-p-0';\n const activatedClasses = on ? 'tw-bg-black-90 hover:tw-bg-black' : 'tw-bg-black-30 hover:tw-bg-black-60';\n const disabledClasses = disabled ? 'tw-bg-black-10 tw-pointer-events-none' : activatedClasses;\n\n return merge([baseClasses, sizeClasses, disabledClasses, lineSizeClasses[size], isFocusVisible && FOCUS_STYLE]);\n }, [on, disabled, size, isFocusVisible]);\n\n const dotClasses = useMemo(() => {\n const baseClasses = 'tw-block tw-self-center tw-bg-white tw-rounded-full tw-transition-transform';\n const disabledClasses = disabled ? 'tw-border tw-border-black-30' : 'tw-border tw-border-black';\n const sizeClasses = size === SwitchSize.Small ? disabledClasses : '';\n const activatedClasses = size === SwitchSize.Small ? 'tw-translate-x-2' : 'tw-translate-x-full';\n const animationClasses = on ? activatedClasses : 'tw-translate-x-0';\n\n return merge([baseClasses, sizeClasses, dotSizeClasses[size], animationClasses]);\n }, [on, disabled, size]);\n\n const containerClasses = useMemo(() => {\n return merge(['tw-gap-2 tw-items-center tw-justify-between', hug ? 'tw-inline-flex' : 'tw-flex']);\n }, [hug]);\n\n return (\n <div className={containerClasses} data-test-id=\"switch-container\">\n {label && (\n <InputLabel clickable={true} htmlFor={id} disabled={disabled} tooltip={tooltip}>\n {label}\n </InputLabel>\n )}\n <button\n {...focusProps}\n id={id}\n disabled={disabled}\n name={name}\n data-test-id=\"switch\"\n className={lineClasses}\n value={on.toString()}\n onClick={onChange}\n type=\"button\"\n >\n <div className={dotClasses} />\n </button>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;AASY,IAAA,sBAAA,MACA,GAAA,QAAA,SACC,EAAA,SAAA,UACD,EAAA,QAAA,SAHA,IAAA,KAAA,CAAA,CAAA;AAMZ,MAAM,IAA8C;AAAA,EAChD,AAAC,OAAmB;AAAA,EACpB,AAAC,QAAoB;AAAA,EACrB,AAAC,OAAmB;AACxB,GAEM,IAA6C;AAAA,EAC/C,AAAC,OAAmB;AAAA,EACpB,AAAC,QAAoB;AAAA,EACrB,AAAC,OAAmB;AACxB,GAca,IAA0B,CAAC;AAAA,EACpC,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAO;AAAA,EACP,QAAK;AAAA,EACL,SAAM;AAAA,EACN;AAAA,MACE;AACI,QAAA,IAAK,EAAc,CAAM,GACzB,EAAE,mBAAgB,kBAAe,EAAa,GAE9C,IAAc,EAAQ,MAMjB,EAAM,CALO,+EACA,MAAS,UAAmB,6BAA6B,UAErD,IAAW,0CADV,IAAK,qCAAqC,uCAGV,EAAgB,IAAO,KAAkB,CAAW,CAAC,GAC/G,CAAC,GAAI,GAAU,GAAM,CAAc,CAAC,GAEjC,IAAa,EAAQ,MAAM;AAC7B,UAAM,IAAc,+EAEd,IAAc,MAAS,UADL,IAAW,iCAAiC,8BACF,IAE5D,IAAmB,IADA,MAAS,UAAmB,qBAAqB,wBACzB;AAEjD,WAAO,EAAM,CAAC,GAAa,GAAa,EAAe,IAAO,CAAgB,CAAC;AAAA,EAChF,GAAA,CAAC,GAAI,GAAU,CAAI,CAAC,GAEjB,IAAmB,EAAQ,MACtB,EAAM,CAAC,+CAA+C,IAAM,mBAAmB,SAAS,CAAC,GACjG,CAAC,CAAG,CAAC;AAER,SACK,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAW;AAAA,IAAkB,gBAAa;AAAA,EAAA,GAC1C,KACI,kBAAA,cAAA,GAAA;AAAA,IAAW,WAAW;AAAA,IAAM,SAAS;AAAA,IAAI;AAAA,IAAoB;AAAA,EACzD,GAAA,CACL,GAEH,kBAAA,cAAA,UAAA;AAAA,IACI,GAAG;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAa;AAAA,IACb,WAAW;AAAA,IACX,OAAO,EAAG,SAAS;AAAA,IACnB,SAAS;AAAA,IACT,MAAK;AAAA,EAAA,GAEJ,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAW;AAAA,EAAY,CAAA,CAChC,CACJ;AAER;"}