@frontify/fondue 12.0.0-beta.79 → 12.0.0-beta.80

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 (8) hide show
  1. package/dist/components/Checkbox/Checkbox.es.js +13 -13
  2. package/dist/components/Checkbox/Checkbox.es.js.map +1 -1
  3. package/dist/index.cjs.js +1 -1
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.umd.js +1 -1
  6. package/dist/index.umd.js.map +1 -1
  7. package/dist/styles.css +1 -1
  8. package/package.json +1 -1
package/dist/components/Checkbox/Checkbox.es.js CHANGED
@@ -11,9 +11,9 @@ import { FOCUS_STYLE as A } from "../../utilities/focusStyle.es.js";
11
11
  import { merge as w } from "../../utilities/merge.es.js";
12
12
  import { useForwardedRef as B } from "../../utilities/useForwardedRef.es.js";
13
13
  var G = /* @__PURE__ */ ((r) => (r.Checked = "Checked", r.Unchecked = "Unchecked", r.Mixed = "Mixed", r))(G || {});
14
- const n = (r) => r === "Checked" || r === "Mixed", H = ({
14
+ const c = (r) => r === "Checked" || r === "Mixed", H = ({
15
15
  id: r,
16
- disabled: c,
16
+ disabled: n,
17
17
  required: i,
18
18
  label: d,
19
19
  tooltip: l,
@@ -25,7 +25,7 @@ const n = (r) => r === "Checked" || r === "Mixed", H = ({
25
25
  state: t = "Unchecked"
26
26
  }, L) => {
27
27
  const b = j(r), e = B(L), { focusProps: M } = D(), y = _({
28
- onChange: c ? void 0 : F,
28
+ onChange: n ? void 0 : F,
29
29
  isSelected: t === "Checked"
30
30
  }), [I, k] = f(), [m, N] = f(), h = (a) => {
31
31
  a.key === "Tab" && k(!0);
@@ -38,7 +38,7 @@ const n = (r) => r === "Checked" || r === "Mixed", H = ({
38
38
  }, [m, e]);
39
39
  const { inputProps: S } = z(
40
40
  {
41
- isDisabled: c,
41
+ isDisabled: n,
42
42
  isRequired: i,
43
43
  isIndeterminate: t === "Mixed",
44
44
  "aria-label": x || d,
@@ -53,7 +53,7 @@ const n = (r) => r === "Checked" || r === "Mixed", H = ({
53
53
  }, /* @__PURE__ */ o.createElement("label", {
54
54
  className: w([
55
55
  "tw-group tw-flex tw-items-center tw-gap-2 tw-select-none tw-outline-none",
56
- !c && "hover:tw-cursor-pointer"
56
+ !n && "hover:tw-cursor-pointer"
57
57
  ])
58
58
  }, /* @__PURE__ */ o.createElement("input", {
59
59
  ...Y(C || S, M),
@@ -65,24 +65,24 @@ const n = (r) => r === "Checked" || r === "Mixed", H = ({
65
65
  }), /* @__PURE__ */ o.createElement("span", {
66
66
  "aria-hidden": "true",
67
67
  className: w([
68
- "tw-relative tw-flex tw-w-4 tw-h-4 tw-items-center tw-justify-center tw-rounded tw-border tw-shrink-0 tw-flex-none",
68
+ "tw-leading-4 tw-relative tw-flex tw-w-4 tw-h-4 tw-items-center tw-justify-center tw-rounded tw-border tw-shrink-0 tw-flex-none",
69
69
  I ? A : "",
70
- c ? w([
70
+ n ? w([
71
71
  "tw-text-white tw-pointer-events-none",
72
- !n(t) && "tw-border-black-20 tw-bg-white dark:tw-border-black-80 dark:tw-bg-black-90",
73
- n(t) && "tw-border-black-40 tw-bg-black-40 dark:tw-border-black-60 dark:tw-bg-black-60"
72
+ !c(t) && "tw-border-black-20 tw-bg-white dark:tw-border-black-80 dark:tw-bg-black-90",
73
+ c(t) && "tw-border-black-40 tw-bg-black-40 dark:tw-border-black-60 dark:tw-bg-black-60"
74
74
  ]) : w([
75
- !n(t) && "tw-border-black-80 tw-bg-white hover:tw-border-black dark:tw-border-white dark:tw-bg-black dark:hover:tw-border-black-20 dark:hover:tw-bg-black-90 group-hover:tw-bg-white group-hover:tw-border-black dark:group-hover:tw-border-black-20 dark:group-hover:tw-bg-black-90",
76
- n(t) && "tw-border-violet-60 tw-bg-violet-60 tw-text-white hover:tw-border-violet-70 hover:tw-bg-violet-70 dark:tw-border-violet-50 dark:tw-bg-violet-50 dark:hover:tw-border-violet-60 dark:hover:tw-bg-violet-60 group-hover:tw-text-white group-hover:tw-border-violet-70 group-hover:tw-bg-violet-70 dark:group-hover:tw-border-violet-60 dark:group-hover:tw-bg-violet-60"
75
+ !c(t) && "tw-border-black-80 tw-bg-white hover:tw-border-black dark:tw-border-white dark:tw-bg-black dark:hover:tw-border-black-20 dark:hover:tw-bg-black-90 group-hover:tw-bg-white group-hover:tw-border-black dark:group-hover:tw-border-black-20 dark:group-hover:tw-bg-black-90",
76
+ c(t) && "tw-border-violet-60 tw-bg-violet-60 tw-text-white hover:tw-border-violet-70 hover:tw-bg-violet-70 dark:tw-border-violet-50 dark:tw-bg-violet-50 dark:hover:tw-border-violet-60 dark:hover:tw-bg-violet-60 group-hover:tw-text-white group-hover:tw-border-violet-70 group-hover:tw-bg-violet-70 dark:group-hover:tw-border-violet-60 dark:group-hover:tw-bg-violet-60"
77
77
  ])
78
78
  ])
79
79
  }, t === "Checked" && /* @__PURE__ */ o.createElement(T, null), t === "Mixed" && /* @__PURE__ */ o.createElement(K, null)), d && /* @__PURE__ */ o.createElement(O, {
80
- disabled: c,
80
+ disabled: n,
81
81
  clickable: !0,
82
82
  htmlFor: b,
83
83
  tooltip: l != null ? l : void 0,
84
84
  required: i,
85
- bold: n(t)
85
+ bold: c(t)
86
86
  }, d)), s && /* @__PURE__ */ o.createElement("span", {
87
87
  "data-test-id": "checkbox-note",
88
88
  className: "tw-text-black-60 tw-font-sans tw-text-xs tw-font-normal"
package/dist/components/Checkbox/Checkbox.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.es.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\nimport IconCheckMark from '@foundation/Icon/Generated/IconCheckMark';\nimport IconMinus from '@foundation/Icon/Generated/IconMinus';\nimport { InputLabel, InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { useToggleState } from '@react-stately/toggle';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\nimport React, { ForwardRefRenderFunction, HTMLAttributes, forwardRef } from 'react';\n\nexport enum CheckboxState {\n Checked = 'Checked',\n Unchecked = 'Unchecked',\n Mixed = 'Mixed',\n}\n\nexport type CheckboxProps = {\n id?: string;\n state?: CheckboxState;\n disabled?: boolean;\n required?: boolean;\n value?: string;\n onChange?: (isChecked: boolean) => void;\n label?: string;\n tooltip?: InputLabelTooltipProps;\n note?: string;\n ariaLabel?: string;\n groupInputProps?: HTMLAttributes<HTMLElement>;\n};\n\nconst isCheckedOrMixed = (checked: CheckboxState): boolean => {\n return checked === CheckboxState.Checked || checked === CheckboxState.Mixed;\n};\n\nconst CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, CheckboxProps> = (\n {\n id: propId,\n disabled,\n required,\n label,\n tooltip,\n note,\n ariaLabel,\n value,\n groupInputProps,\n onChange,\n state = CheckboxState.Unchecked,\n },\n ref,\n) => {\n const id = useMemoizedId(propId);\n const inputRef = useForwardedRef<HTMLInputElement | null>(ref);\n const { focusProps } = useFocusRing();\n const toggleState = useToggleState({\n onChange: disabled ? undefined : onChange,\n isSelected: state === CheckboxState.Checked,\n });\n const [showFocus, setShowFocus] = useState<Nullable<boolean>>();\n const [listeningForKeyboardEvents, setListeningForKeyboardEvents] = useState<Nullable<boolean>>();\n\n const tabFocusListener = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n setShowFocus(true);\n }\n };\n\n const blurListener = () => {\n setShowFocus(false);\n };\n\n useEffect(() => {\n if (!listeningForKeyboardEvents) {\n inputRef?.current?.removeEventListener('keyup', tabFocusListener);\n inputRef?.current?.addEventListener('keyup', tabFocusListener);\n inputRef?.current?.removeEventListener('blur', blurListener);\n inputRef?.current?.addEventListener('blur', blurListener);\n\n setListeningForKeyboardEvents(true);\n }\n }, [listeningForKeyboardEvents, inputRef]);\n\n const { inputProps } = useCheckbox(\n {\n isDisabled: disabled,\n isRequired: required,\n isIndeterminate: state === CheckboxState.Mixed,\n 'aria-label': ariaLabel || label,\n value,\n },\n toggleState,\n inputRef,\n );\n\n return (\n <div className=\"tw-flex tw-flex-col tw-gap-1 tw-transition-colors\" data-test-id=\"checkbox\">\n <label\n className={merge([\n 'tw-group tw-flex tw-items-center tw-gap-2 tw-select-none tw-outline-none',\n !disabled && 'hover:tw-cursor-pointer',\n ])}\n >\n <input\n {...mergeProps(groupInputProps || inputProps, focusProps)}\n id={id}\n ref={inputRef}\n className=\"tw-sr-only\"\n data-test-id=\"checkbox-input\"\n required={required}\n />\n <span\n aria-hidden=\"true\"\n className={merge([\n 'tw-relative tw-flex tw-w-4 tw-h-4 tw-items-center tw-justify-center tw-rounded tw-border tw-shrink-0 tw-flex-none',\n showFocus ? FOCUS_STYLE : '',\n disabled\n ? merge([\n 'tw-text-white tw-pointer-events-none',\n !isCheckedOrMixed(state) &&\n 'tw-border-black-20 tw-bg-white dark:tw-border-black-80 dark:tw-bg-black-90',\n isCheckedOrMixed(state) &&\n 'tw-border-black-40 tw-bg-black-40 dark:tw-border-black-60 dark:tw-bg-black-60',\n ])\n : merge([\n !isCheckedOrMixed(state) &&\n 'tw-border-black-80 tw-bg-white hover:tw-border-black dark:tw-border-white dark:tw-bg-black dark:hover:tw-border-black-20 dark:hover:tw-bg-black-90 group-hover:tw-bg-white group-hover:tw-border-black dark:group-hover:tw-border-black-20 dark:group-hover:tw-bg-black-90',\n isCheckedOrMixed(state) &&\n 'tw-border-violet-60 tw-bg-violet-60 tw-text-white hover:tw-border-violet-70 hover:tw-bg-violet-70 dark:tw-border-violet-50 dark:tw-bg-violet-50 dark:hover:tw-border-violet-60 dark:hover:tw-bg-violet-60 group-hover:tw-text-white group-hover:tw-border-violet-70 group-hover:tw-bg-violet-70 dark:group-hover:tw-border-violet-60 dark:group-hover:tw-bg-violet-60',\n ]),\n ])}\n >\n {state === CheckboxState.Checked && <IconCheckMark />}\n {state === CheckboxState.Mixed && <IconMinus />}\n </span>\n {label && (\n <InputLabel\n disabled={disabled}\n clickable\n htmlFor={id}\n tooltip={tooltip ?? undefined}\n required={required}\n bold={isCheckedOrMixed(state)}\n >\n {label}\n </InputLabel>\n )}\n </label>\n {note && (\n <span data-test-id=\"checkbox-note\" className=\"tw-text-black-60 tw-font-sans tw-text-xs tw-font-normal\">\n {note}\n </span>\n )}\n </div>\n );\n};\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(CheckboxComponent);\n"],"names":["CheckboxState","isCheckedOrMixed","checked","CheckboxComponent","propId","disabled","required","label","tooltip","note","ariaLabel","value","groupInputProps","onChange","state","ref","id","useMemoizedId","inputRef","useForwardedRef","focusProps","useFocusRing","toggleState","useToggleState","showFocus","setShowFocus","useState","listeningForKeyboardEvents","setListeningForKeyboardEvents","tabFocusListener","event","blurListener","useEffect","_a","_b","_c","_d","inputProps","useCheckbox","React","merge","mergeProps","FOCUS_STYLE","IconCheckMark","IconMinus","InputLabel","Checkbox","forwardRef"],"mappings":"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"}
1
+ {"version":3,"file":"Checkbox.es.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\nimport IconCheckMark from '@foundation/Icon/Generated/IconCheckMark';\nimport IconMinus from '@foundation/Icon/Generated/IconMinus';\nimport { InputLabel, InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { useToggleState } from '@react-stately/toggle';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\nimport React, { ForwardRefRenderFunction, HTMLAttributes, forwardRef } from 'react';\n\nexport enum CheckboxState {\n Checked = 'Checked',\n Unchecked = 'Unchecked',\n Mixed = 'Mixed',\n}\n\nexport type CheckboxProps = {\n id?: string;\n state?: CheckboxState;\n disabled?: boolean;\n required?: boolean;\n value?: string;\n onChange?: (isChecked: boolean) => void;\n label?: string;\n tooltip?: InputLabelTooltipProps;\n note?: string;\n ariaLabel?: string;\n groupInputProps?: HTMLAttributes<HTMLElement>;\n};\n\nconst isCheckedOrMixed = (checked: CheckboxState): boolean => {\n return checked === CheckboxState.Checked || checked === CheckboxState.Mixed;\n};\n\nconst CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, CheckboxProps> = (\n {\n id: propId,\n disabled,\n required,\n label,\n tooltip,\n note,\n ariaLabel,\n value,\n groupInputProps,\n onChange,\n state = CheckboxState.Unchecked,\n },\n ref,\n) => {\n const id = useMemoizedId(propId);\n const inputRef = useForwardedRef<HTMLInputElement | null>(ref);\n const { focusProps } = useFocusRing();\n const toggleState = useToggleState({\n onChange: disabled ? undefined : onChange,\n isSelected: state === CheckboxState.Checked,\n });\n const [showFocus, setShowFocus] = useState<Nullable<boolean>>();\n const [listeningForKeyboardEvents, setListeningForKeyboardEvents] = useState<Nullable<boolean>>();\n\n const tabFocusListener = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n setShowFocus(true);\n }\n };\n\n const blurListener = () => {\n setShowFocus(false);\n };\n\n useEffect(() => {\n if (!listeningForKeyboardEvents) {\n inputRef?.current?.removeEventListener('keyup', tabFocusListener);\n inputRef?.current?.addEventListener('keyup', tabFocusListener);\n inputRef?.current?.removeEventListener('blur', blurListener);\n inputRef?.current?.addEventListener('blur', blurListener);\n\n setListeningForKeyboardEvents(true);\n }\n }, [listeningForKeyboardEvents, inputRef]);\n\n const { inputProps } = useCheckbox(\n {\n isDisabled: disabled,\n isRequired: required,\n isIndeterminate: state === CheckboxState.Mixed,\n 'aria-label': ariaLabel || label,\n value,\n },\n toggleState,\n inputRef,\n );\n\n return (\n <div className=\"tw-flex tw-flex-col tw-gap-1 tw-transition-colors\" data-test-id=\"checkbox\">\n <label\n className={merge([\n 'tw-group tw-flex tw-items-center tw-gap-2 tw-select-none tw-outline-none',\n !disabled && 'hover:tw-cursor-pointer',\n ])}\n >\n <input\n {...mergeProps(groupInputProps || inputProps, focusProps)}\n id={id}\n ref={inputRef}\n className=\"tw-sr-only\"\n data-test-id=\"checkbox-input\"\n required={required}\n />\n <span\n aria-hidden=\"true\"\n className={merge([\n 'tw-leading-4 tw-relative tw-flex tw-w-4 tw-h-4 tw-items-center tw-justify-center tw-rounded tw-border tw-shrink-0 tw-flex-none',\n showFocus ? FOCUS_STYLE : '',\n disabled\n ? merge([\n 'tw-text-white tw-pointer-events-none',\n !isCheckedOrMixed(state) &&\n 'tw-border-black-20 tw-bg-white dark:tw-border-black-80 dark:tw-bg-black-90',\n isCheckedOrMixed(state) &&\n 'tw-border-black-40 tw-bg-black-40 dark:tw-border-black-60 dark:tw-bg-black-60',\n ])\n : merge([\n !isCheckedOrMixed(state) &&\n 'tw-border-black-80 tw-bg-white hover:tw-border-black dark:tw-border-white dark:tw-bg-black dark:hover:tw-border-black-20 dark:hover:tw-bg-black-90 group-hover:tw-bg-white group-hover:tw-border-black dark:group-hover:tw-border-black-20 dark:group-hover:tw-bg-black-90',\n isCheckedOrMixed(state) &&\n 'tw-border-violet-60 tw-bg-violet-60 tw-text-white hover:tw-border-violet-70 hover:tw-bg-violet-70 dark:tw-border-violet-50 dark:tw-bg-violet-50 dark:hover:tw-border-violet-60 dark:hover:tw-bg-violet-60 group-hover:tw-text-white group-hover:tw-border-violet-70 group-hover:tw-bg-violet-70 dark:group-hover:tw-border-violet-60 dark:group-hover:tw-bg-violet-60',\n ]),\n ])}\n >\n {state === CheckboxState.Checked && <IconCheckMark />}\n {state === CheckboxState.Mixed && <IconMinus />}\n </span>\n {label && (\n <InputLabel\n disabled={disabled}\n clickable\n htmlFor={id}\n tooltip={tooltip ?? undefined}\n required={required}\n bold={isCheckedOrMixed(state)}\n >\n {label}\n </InputLabel>\n )}\n </label>\n {note && (\n <span data-test-id=\"checkbox-note\" className=\"tw-text-black-60 tw-font-sans tw-text-xs tw-font-normal\">\n {note}\n </span>\n )}\n </div>\n );\n};\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(CheckboxComponent);\n"],"names":["CheckboxState","isCheckedOrMixed","checked","CheckboxComponent","propId","disabled","required","label","tooltip","note","ariaLabel","value","groupInputProps","onChange","state","ref","id","useMemoizedId","inputRef","useForwardedRef","focusProps","useFocusRing","toggleState","useToggleState","showFocus","setShowFocus","useState","listeningForKeyboardEvents","setListeningForKeyboardEvents","tabFocusListener","event","blurListener","useEffect","_a","_b","_c","_d","inputProps","useCheckbox","React","merge","mergeProps","FOCUS_STYLE","IconCheckMark","IconMinus","InputLabel","Checkbox","forwardRef"],"mappings":"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"}