npm - @frontify/fondue - Versions diffs - 12.0.0-beta.164 → 12.0.0-beta.165 - Mend

@frontify/fondue 12.0.0-beta.164 → 12.0.0-beta.165

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 (166) hide show

package/dist/components/ScrollWrapper/ScrollWrapper.d.ts CHANGED Viewed

@@ -1,3 +1,6 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { ScrollWrapperProps } from './types';
-export declare const ScrollWrapper: FC<ScrollWrapperProps>;
+export declare const ScrollWrapper: {
+    ({ direction, children, }: ScrollWrapperProps): ReactElement;
+    displayName: string;
+};

package/dist/components/ScrollWrapper/ScrollWrapper.es.js CHANGED Viewed

@@ -8,7 +8,10 @@ import { FOCUS_STYLE as h } from "../../utilities/focusStyle.es.js";
 const i = {
   bottom: "linear-gradient(180deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)",
   top: "linear-gradient(0deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)"
-}, E = ({ direction: r = o.Vertical, children: n }) => {
+}, E = ({
+  direction: r = o.Vertical,
+  children: n
+}) => {
   const t = b(null), [{ showTopShadow: c, showBottomShadow: s }, w] = u(t), { isFocusVisible: m, focusProps: p } = d(), l = r === o.Vertical || r === o.Both, a = t.current ? t.current.clientWidth + 8 : "100%";
   return /* @__PURE__ */ e.createElement(
     "div",

package/dist/components/ScrollWrapper/ScrollWrapper.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollWrapper.es.js","sources":["../../../src/components/ScrollWrapper/ScrollWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport React, { FC, useRef } from 'react';\nimport { FOCUS_STYLE, merge } from '../..';\nimport { useScrollWrapper } from './hooks/useScrollWrapper';\nimport { ScrollWrapperDirection, ScrollWrapperProps, scrollWrapperDirections } from './types';\n\nconst GRADIENTS = {\n bottom: 'linear-gradient(180deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)',\n top: 'linear-gradient(0deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)',\n};\n\nexport const ScrollWrapper: ~~FC<ScrollWrapperProps>~~ = ({ direction = ScrollWrapperDirection.Vertical, children }) => {\n const scrollingContainer = useRef<HTMLDivElement>(null);\n\n const [{ showTopShadow, showBottomShadow }, scrollDivProps] = useScrollWrapper(scrollingContainer);\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const directionVertical =\n direction === ScrollWrapperDirection.Vertical \|\| direction === ScrollWrapperDirection.Both;\n\n const gradientWidth = scrollingContainer.current ? scrollingContainer.current.clientWidth + 8 : '100%';\n\n return (\n <div\n data-test-id=\"scroll-wrapper\"\n className=\"tw-h-full tw-relative tw-flex-auto tw-flex tw-flex-col tw-min-h-0\"\n >\n {directionVertical && showTopShadow && (\n <div\n className=\"tw-h-3 tw-w-full tw-absolute tw-z-10 tw-top-0 tw-left-0 tw-mix-blend-darken tw-border-t tw-border-line\"\n style={{\n background: GRADIENTS.top,\n width: gradientWidth,\n }}\n />\n )}\n <div\n ref={scrollingContainer}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={0}\n role=\"region\"\n aria-label=\"Scrollable dialogue content\"\n className={merge([\n scrollWrapperDirections[direction],\n 'tw-flex-auto tw-min-h-0 tw-outline-none tw-pt-px tw-pb-2 tw-px-2 tw--mx-2',\n isFocusVisible && FOCUS_STYLE,\n ])}\n {...scrollDivProps}\n {...focusProps}\n >\n {children}\n </div>\n {directionVertical && showBottomShadow && (\n <div\n className=\"tw-h-3 tw-absolute tw-z-10 tw-bottom-0 tw-left-0 tw-mix-blend-darken tw-border-b tw-border-line\"\n style={{\n background: GRADIENTS.bottom,\n width: gradientWidth,\n }}\n />\n )}\n </div>\n );\n};\nScrollWrapper.displayName = 'FondueScrollWrapper';\n"],"names":["GRADIENTS","ScrollWrapper","direction","ScrollWrapperDirection","children","scrollingContainer","useRef","showTopShadow","showBottomShadow","scrollDivProps","useScrollWrapper","isFocusVisible","focusProps","useFocusRing","directionVertical","gradientWidth","React","merge","scrollWrapperDirections","FOCUS_STYLE"],"mappings":";;;;;;;AAQA,MAAMA,IAAY;AAAA,EACd,QAAQ;AAAA,EACR,KAAK;AACT,GAEaC,~~IAAwC~~,CAAC,~~EAAE~~,WAAAC,IAAYC,EAAuB,~~UAAU~~,UAAAC,~~QAAe~~;~~AAC1G~~,QAAAC,IAAqBC,EAAuB,IAAI,GAEhD,CAAC,EAAE,eAAAC,GAAe,kBAAAC,EAAA,GAAoBC,CAAc,IAAIC,EAAiBL,CAAkB,GAE3F,EAAE,gBAAAM,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAE9CC,IACFZ,MAAcC,EAAuB,YAAYD,MAAcC,EAAuB,MAEpFY,IAAgBV,EAAmB,UAAUA,EAAmB,QAAQ,cAAc,IAAI;AAG5F,SAAA,gBAAAW,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAU;AAAA,IAAA;AAAA,IAETF,KAAqBP,KAClB,gBAAAS,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,OAAO;AAAA,UACH,YAAYhB,EAAU;AAAA,UACtB,OAAOe;AAAA,QACX;AAAA,MAAA;AAAA,IACJ;AAAA,IAEJ,gBAAAC,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKX;AAAA,QAEL,UAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAWY,EAAM;AAAA,UACbC,EAAwBhB,CAAS;AAAA,UACjC;AAAA,UACAS,KAAkBQ;AAAA,QAAA,CACrB;AAAA,QACA,GAAGV;AAAA,QACH,GAAGG;AAAA,MAAA;AAAA,MAEHR;AAAA,IACL;AAAA,IACCU,KAAqBN,KAClB,gBAAAQ,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,OAAO;AAAA,UACH,YAAYhB,EAAU;AAAA,UACtB,OAAOe;AAAA,QACX;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAIhB;AACAd,EAAc,cAAc;"}
1	+ {"version":3,"file":"ScrollWrapper.es.js","sources":["../../../src/components/ScrollWrapper/ScrollWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport React, { ReactElement, useRef } from 'react';\nimport { FOCUS_STYLE, merge } from '../..';\nimport { useScrollWrapper } from './hooks/useScrollWrapper';\nimport { ScrollWrapperDirection, ScrollWrapperProps, scrollWrapperDirections } from './types';\n\nconst GRADIENTS = {\n bottom: 'linear-gradient(180deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)',\n top: 'linear-gradient(0deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)',\n};\n\nexport const ScrollWrapper = ({\n direction = ScrollWrapperDirection.Vertical,\n children,\n}: ScrollWrapperProps): ReactElement => {\n const scrollingContainer = useRef<HTMLDivElement>(null);\n\n const [{ showTopShadow, showBottomShadow }, scrollDivProps] = useScrollWrapper(scrollingContainer);\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const directionVertical =\n direction === ScrollWrapperDirection.Vertical \|\| direction === ScrollWrapperDirection.Both;\n\n const gradientWidth = scrollingContainer.current ? scrollingContainer.current.clientWidth + 8 : '100%';\n\n return (\n <div\n data-test-id=\"scroll-wrapper\"\n className=\"tw-h-full tw-relative tw-flex-auto tw-flex tw-flex-col tw-min-h-0\"\n >\n {directionVertical && showTopShadow && (\n <div\n className=\"tw-h-3 tw-w-full tw-absolute tw-z-10 tw-top-0 tw-left-0 tw-mix-blend-darken tw-border-t tw-border-line\"\n style={{\n background: GRADIENTS.top,\n width: gradientWidth,\n }}\n />\n )}\n <div\n ref={scrollingContainer}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={0}\n role=\"region\"\n aria-label=\"Scrollable dialogue content\"\n className={merge([\n scrollWrapperDirections[direction],\n 'tw-flex-auto tw-min-h-0 tw-outline-none tw-pt-px tw-pb-2 tw-px-2 tw--mx-2',\n isFocusVisible && FOCUS_STYLE,\n ])}\n {...scrollDivProps}\n {...focusProps}\n >\n {children}\n </div>\n {directionVertical && showBottomShadow && (\n <div\n className=\"tw-h-3 tw-absolute tw-z-10 tw-bottom-0 tw-left-0 tw-mix-blend-darken tw-border-b tw-border-line\"\n style={{\n background: GRADIENTS.bottom,\n width: gradientWidth,\n }}\n />\n )}\n </div>\n );\n};\nScrollWrapper.displayName = 'FondueScrollWrapper';\n"],"names":["GRADIENTS","ScrollWrapper","direction","ScrollWrapperDirection","children","scrollingContainer","useRef","showTopShadow","showBottomShadow","scrollDivProps","useScrollWrapper","isFocusVisible","focusProps","useFocusRing","directionVertical","gradientWidth","React","merge","scrollWrapperDirections","FOCUS_STYLE"],"mappings":";;;;;;;AAQA,MAAMA,IAAY;AAAA,EACd,QAAQ;AAAA,EACR,KAAK;AACT,GAEaC,IAAgB,CAAC;AAAA,EAC1B,WAAAC,IAAYC,EAAuB;AAAA,EACnC,UAAAC;AACJ,MAAwC;AAC9B,QAAAC,IAAqBC,EAAuB,IAAI,GAEhD,CAAC,EAAE,eAAAC,GAAe,kBAAAC,EAAA,GAAoBC,CAAc,IAAIC,EAAiBL,CAAkB,GAE3F,EAAE,gBAAAM,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAE9CC,IACFZ,MAAcC,EAAuB,YAAYD,MAAcC,EAAuB,MAEpFY,IAAgBV,EAAmB,UAAUA,EAAmB,QAAQ,cAAc,IAAI;AAG5F,SAAA,gBAAAW,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAU;AAAA,IAAA;AAAA,IAETF,KAAqBP,KAClB,gBAAAS,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,OAAO;AAAA,UACH,YAAYhB,EAAU;AAAA,UACtB,OAAOe;AAAA,QACX;AAAA,MAAA;AAAA,IACJ;AAAA,IAEJ,gBAAAC,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKX;AAAA,QAEL,UAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAWY,EAAM;AAAA,UACbC,EAAwBhB,CAAS;AAAA,UACjC;AAAA,UACAS,KAAkBQ;AAAA,QAAA,CACrB;AAAA,QACA,GAAGV;AAAA,QACH,GAAGG;AAAA,MAAA;AAAA,MAEHR;AAAA,IACL;AAAA,IACCU,KAAqBN,KAClB,gBAAAQ,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,OAAO;AAAA,UACH,YAAYhB,EAAU;AAAA,UACtB,OAAOe;AAAA,QACX;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAIhB;AACAd,EAAc,cAAc;"}

package/dist/components/SegmentedControls/SegmentedControls.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { IconProps } from '../../foundation/Icon/IconProps';
-import { FC, ReactElement } from 'react';
+import { ReactElement } from 'react';
 export type IconItem = {
     id: string;
     icon: ReactElement<IconProps>;
@@ -18,4 +18,7 @@ export type SegmentedControlsProps = {
     ariaLabel?: string;
     disabled?: boolean;
 };
-export declare const SegmentedControls: FC<SegmentedControlsProps>;
+export declare const SegmentedControls: {
+    ({ id: propId, items, activeItemId, onChange, ariaLabel, disabled, }: SegmentedControlsProps): ReactElement;
+    displayName: string;
+};

package/dist/components/SegmentedControls/SegmentedControls.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentedControls.es.js","sources":["../../../src/components/SegmentedControls/SegmentedControls.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { useRadio, useRadioGroup } from '@react-aria/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { RadioGroupState, useRadioGroupState } from '@react-stately/radio';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { motion } from 'framer-motion';\nimport React, { ~~FC,~~ ReactElement, useMemo, useRef } from 'react';\n\nexport type IconItem = {\n id: string;\n icon: ReactElement<IconProps>;\n value?: string;\n ariaLabel: string;\n};\n\nexport type TextOrNumberItem = {\n id: string;\n value: string \| number;\n};\n\nexport type SegmentedControlsProps = {\n id?: string;\n items: (TextOrNumberItem \| IconItem)[];\n activeItemId?: string;\n onChange: (id: string) => void;\n ariaLabel?: string;\n disabled?: boolean;\n};\n\nconst isIconItem = (item: TextOrNumberItem \| IconItem): item is IconItem => (item as IconItem).icon !== undefined;\n\ninterface SegmentedControlsItemProps {\n id: string;\n item: TextOrNumberItem \| IconItem;\n disabled: boolean;\n radioGroupState: RadioGroupState;\n}\n\nconst SegmentedControlsItem = (props: SegmentedControlsItemProps) => {\n const { id, item, disabled, radioGroupState } = props;\n const ref = useRef<HTMLInputElement \| null>(null);\n const isActive = item.id === radioGroupState.selectedValue;\n const { inputProps } = useRadio(\n {\n value: item.id,\n 'aria-label': isIconItem(item) ? item.ariaLabel : item.value.toString(),\n isDisabled: disabled,\n id: isActive ? id : undefined,\n },\n radioGroupState,\n ref,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const handleMockLabelClick = () => {\n if (!disabled) {\n radioGroupState.setSelectedValue(item.id);\n ref.current?.focus();\n setInteractionModality('pointer');\n }\n };\n\n const getSegmentedControlsItemTestId = () => {\n switch (true) {\n case isIconItem(item):\n return 'fondue-segmented-controls-item-icon';\n case typeof item.value === 'string':\n return 'fondue-segmented-controls-item-text';\n default:\n return 'fondue-segmented-controls-item-number';\n }\n };\n\n return (\n <div key={item.id} className={merge(['tw-relative', isFocusVisible && FOCUS_STYLE])}>\n <div\n // TODO: Change element back to label when bug #2380 from @react-aria is fixed\n // https://github.com/adobe/react-spectrum/issues/2380\n role=\"none\"\n onClick={handleMockLabelClick}\n data-test-id={getSegmentedControlsItemTestId()}\n className={merge([\n 'tw-relative tw-w-full tw-inline-flex tw-justify-center tw-items-center tw-font-sans tw-font-normal tw-h-full tw-text-center',\n isActive && !disabled ? 'tw-text-black' : 'tw-text-black-80',\n !disabled ? 'hover:tw-text-black hover:tw-cursor-pointer' : '',\n ])}\n >\n <VisuallyHidden>\n <input {...inputProps} {...focusProps} data-test-id=\"fondue-segmented-controls-input\" ref={ref} />\n </VisuallyHidden>\n <span className=\"tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex\">\n {isIconItem(item) && (\n <span className=\"tw-leading-3\" aria-label={item.ariaLabel}>\n {item.icon}\n </span>\n )}\n {item.value && <span className={isIconItem(item) ? 'tw-ml-2' : ''}>{item.value.toString()}</span>}\n </span>\n </div>\n </div>\n );\n};\n\nexport const SegmentedControls: ~~FC<SegmentedControlsProps>~~ = ({\n id: propId,\n items,\n activeItemId,\n onChange,\n ariaLabel = 'SegmentedControls',\n disabled = false,\n}) => {\n const id = useMemoizedId(propId);\n const groupProps = { onChange, value: activeItemId, label: ariaLabel, isDisabled: disabled };\n const radioGroupState = useRadioGroupState(groupProps);\n const { radioGroupProps } = useRadioGroup(groupProps, radioGroupState);\n const itemElements = useMemo(() => {\n return items.map((item) => (\n <SegmentedControlsItem\n id={id}\n item={item}\n disabled={disabled}\n radioGroupState={radioGroupState}\n key={`fondue-segmented-controls-${id}-item-${item.id}`}\n />\n ));\n }, [items, id, disabled, radioGroupState]);\n const selectedIndex = items.findIndex((item) => item.id === radioGroupState.selectedValue);\n\n return (\n <div className=\"tw-flex\">\n <fieldset\n {...radioGroupProps}\n data-test-id=\"fondue-segmented-controls\"\n className=\"tw-relative tw-h-9 tw-w-full tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly tw-p-0 tw-border tw-border-black-20 tw-m-0 tw-bg-black-0 tw-rounded tw-font-sans tw-text-s tw-select-none\"\n >\n <motion.div\n aria-hidden=\"true\"\n // div border is not included in width so it must be subtracted from translation.\n animate={{ x: `calc(${100 selectedIndex}% - ${2 * selectedIndex}px)` }}\n initial={false}\n transition={{ type: 'tween', duration: 0.3 }}\n style={{\n width: `${100 / items.length}%`,\n }}\n hidden={!activeItemId}\n className={merge([\n 'tw-absolute tw--inset-px tw-h-full tw-box-content tw-border tw-rounded tw-pointer-events-none',\n disabled\n ? 'tw-border-line-x-strong tw-border-opacity-30 tw-bg-black-0'\n : 'tw-border-black tw-bg-white',\n ])}\n />\n {itemElements}\n </fieldset>\n </div>\n );\n};\nSegmentedControls.displayName = 'FondueSegmentedControls';\n"],"names":["isIconItem","item","SegmentedControlsItem","props","id","disabled","radioGroupState","ref","useRef","isActive","inputProps","useRadio","isFocusVisible","focusProps","useFocusRing","handleMockLabelClick","_a","setInteractionModality","getSegmentedControlsItemTestId","React","merge","FOCUS_STYLE","VisuallyHidden","SegmentedControls","propId","items","activeItemId","onChange","ariaLabel","useMemoizedId","groupProps","useRadioGroupState","radioGroupProps","useRadioGroup","itemElements","useMemo","selectedIndex","motion"],"mappings":";;;;;;;;;;AAmCA,MAAMA,IAAa,CAACC,MAAyDA,EAAkB,SAAS,QASlGC,IAAwB,CAACC,MAAsC;AACjE,QAAM,EAAE,IAAAC,GAAI,MAAAH,GAAM,UAAAI,GAAU,iBAAAC,MAAoBH,GAC1CI,IAAMC,EAAgC,IAAI,GAC1CC,IAAWR,EAAK,OAAOK,EAAgB,eACvC,EAAE,YAAAI,MAAeC;AAAA,IACnB;AAAA,MACI,OAAOV,EAAK;AAAA,MACZ,cAAcD,EAAWC,CAAI,IAAIA,EAAK,YAAYA,EAAK,MAAM,SAAS;AAAA,MACtE,YAAYI;AAAA,MACZ,IAAII,IAAWL,IAAK;AAAA,IACxB;AAAA,IACAE;AAAA,IACAC;AAAA,EAAA,GAEE,EAAE,gBAAAK,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAE9CC,IAAuB,MAAM;;AAC/B,IAAKV,MACeC,EAAA,iBAAiBL,EAAK,EAAE,IACxCe,IAAAT,EAAI,YAAJ,QAAAS,EAAa,SACbC,EAAuB,SAAS;AAAA,EACpC,GAGEC,IAAiC,MAAM;AACzC,YAAQ,IAAM;AAAA,MACV,KAAKlB,EAAWC,CAAI;AACT,eAAA;AAAA,MACX,KAAK,OAAOA,EAAK,SAAU;AAChB,eAAA;AAAA,MACX;AACW,eAAA;AAAA,IACf;AAAA,EAAA;AAGJ,SACK,gBAAAkB,EAAA,cAAA,OAAA,EAAI,KAAKlB,EAAK,IAAI,WAAWmB,EAAM,CAAC,eAAeR,KAAkBS,CAAW,CAAC,EAC9E,GAAA,gBAAAF,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAGG,MAAK;AAAA,MACL,SAASJ;AAAA,MACT,gBAAcG,EAA+B;AAAA,MAC7C,WAAWE,EAAM;AAAA,QACb;AAAA,QACAX,KAAY,CAACJ,IAAW,kBAAkB;AAAA,QACzCA,IAA2D,KAAhD;AAAA,MAAgD,CAC/D;AAAA,IAAA;AAAA,IAED,gBAAAc,EAAA,cAACG,GACG,MAAA,gBAAAH,EAAA,cAAC,SAAO,EAAA,GAAGT,GAAa,GAAGG,GAAY,gBAAa,mCAAkC,KAAAN,EAAU,CAAA,CACpG;AAAA,IACC,gBAAAY,EAAA,cAAA,QAAA,EAAK,WAAU,mEAAA,GACXnB,EAAWC,CAAI,KACZ,gBAAAkB,EAAA,cAAC,QAAK,EAAA,WAAU,gBAAe,cAAYlB,EAAK,UAC3C,GAAAA,EAAK,IACV,GAEHA,EAAK,SAAU,gBAAAkB,EAAA,cAAA,QAAA,EAAK,WAAWnB,EAAWC,CAAI,IAAI,YAAY,GAAK,GAAAA,EAAK,MAAM,SAAA,CAAW,CAC9F;AAAA,EAAA,CAER;AAER,GAEasB,~~IAAgD~~,CAAC;AAAA,~~EAC1D~~,IAAIC;AAAA,EACJ,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAvB,IAAW;AACf,~~MAAM~~;~~AACI~~,QAAAD,IAAKyB,EAAcL,CAAM,GACzBM,IAAa,EAAE,UAAAH,GAAU,OAAOD,GAAc,OAAOE,GAAW,YAAYvB,KAC5EC,IAAkByB,EAAmBD,CAAU,GAC/C,EAAE,iBAAAE,EAAoB,IAAAC,EAAcH,GAAYxB,CAAe,GAC/D4B,IAAeC,EAAQ,MAClBV,EAAM,IAAI,CAACxB,MACd,gBAAAkB,EAAA;AAAA,IAACjB;AAAA,IAAA;AAAA,MACG,IAAAE;AAAA,MACA,MAAAH;AAAA,MACA,UAAAI;AAAA,MACA,iBAAAC;AAAA,MACA,KAAK,6BAA6BF,UAAWH,EAAK;AAAA,IAAA;AAAA,EAAA,CAEzD,GACF,CAACwB,GAAOrB,GAAIC,GAAUC,CAAe,CAAC,GACnC8B,IAAgBX,EAAM,UAAU,CAACxB,MAASA,EAAK,OAAOK,EAAgB,aAAa;AAGrF,SAAA,gBAAAa,EAAA,cAAC,OAAI,EAAA,WAAU,UACX,GAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGa;AAAA,MACJ,gBAAa;AAAA,MACb,WAAU;AAAA,IAAA;AAAA,IAEV,gBAAAb,EAAA;AAAA,MAACkB,EAAO;AAAA,MAAP;AAAA,QACG,eAAY;AAAA,QAEZ,SAAS,EAAE,GAAG,QAAQ,MAAMD,QAAoB,IAAIA,OAAmB;AAAA,QACvE,SAAS;AAAA,QACT,YAAY,EAAE,MAAM,SAAS,UAAU,IAAI;AAAA,QAC3C,OAAO;AAAA,UACH,OAAO,GAAG,MAAMX,EAAM;AAAA,QAC1B;AAAA,QACA,QAAQ,CAACC;AAAA,QACT,WAAWN,EAAM;AAAA,UACb;AAAA,UACAf,IACM,+DACA;AAAA,QAAA,CACT;AAAA,MAAA;AAAA,IACL;AAAA,IACC6B;AAAA,EAAA,CAET;AAER;AACAX,EAAkB,cAAc;"}
1	+ {"version":3,"file":"SegmentedControls.es.js","sources":["../../../src/components/SegmentedControls/SegmentedControls.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { useRadio, useRadioGroup } from '@react-aria/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { RadioGroupState, useRadioGroupState } from '@react-stately/radio';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { motion } from 'framer-motion';\nimport React, { ReactElement, useMemo, useRef } from 'react';\n\nexport type IconItem = {\n id: string;\n icon: ReactElement<IconProps>;\n value?: string;\n ariaLabel: string;\n};\n\nexport type TextOrNumberItem = {\n id: string;\n value: string \| number;\n};\n\nexport type SegmentedControlsProps = {\n id?: string;\n items: (TextOrNumberItem \| IconItem)[];\n activeItemId?: string;\n onChange: (id: string) => void;\n ariaLabel?: string;\n disabled?: boolean;\n};\n\nconst isIconItem = (item: TextOrNumberItem \| IconItem): item is IconItem => (item as IconItem).icon !== undefined;\n\ninterface SegmentedControlsItemProps {\n id: string;\n item: TextOrNumberItem \| IconItem;\n disabled: boolean;\n radioGroupState: RadioGroupState;\n}\n\nconst SegmentedControlsItem = (props: SegmentedControlsItemProps) => {\n const { id, item, disabled, radioGroupState } = props;\n const ref = useRef<HTMLInputElement \| null>(null);\n const isActive = item.id === radioGroupState.selectedValue;\n const { inputProps } = useRadio(\n {\n value: item.id,\n 'aria-label': isIconItem(item) ? item.ariaLabel : item.value.toString(),\n isDisabled: disabled,\n id: isActive ? id : undefined,\n },\n radioGroupState,\n ref,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const handleMockLabelClick = () => {\n if (!disabled) {\n radioGroupState.setSelectedValue(item.id);\n ref.current?.focus();\n setInteractionModality('pointer');\n }\n };\n\n const getSegmentedControlsItemTestId = () => {\n switch (true) {\n case isIconItem(item):\n return 'fondue-segmented-controls-item-icon';\n case typeof item.value === 'string':\n return 'fondue-segmented-controls-item-text';\n default:\n return 'fondue-segmented-controls-item-number';\n }\n };\n\n return (\n <div key={item.id} className={merge(['tw-relative', isFocusVisible && FOCUS_STYLE])}>\n <div\n // TODO: Change element back to label when bug #2380 from @react-aria is fixed\n // https://github.com/adobe/react-spectrum/issues/2380\n role=\"none\"\n onClick={handleMockLabelClick}\n data-test-id={getSegmentedControlsItemTestId()}\n className={merge([\n 'tw-relative tw-w-full tw-inline-flex tw-justify-center tw-items-center tw-font-sans tw-font-normal tw-h-full tw-text-center',\n isActive && !disabled ? 'tw-text-black' : 'tw-text-black-80',\n !disabled ? 'hover:tw-text-black hover:tw-cursor-pointer' : '',\n ])}\n >\n <VisuallyHidden>\n <input {...inputProps} {...focusProps} data-test-id=\"fondue-segmented-controls-input\" ref={ref} />\n </VisuallyHidden>\n <span className=\"tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex\">\n {isIconItem(item) && (\n <span className=\"tw-leading-3\" aria-label={item.ariaLabel}>\n {item.icon}\n </span>\n )}\n {item.value && <span className={isIconItem(item) ? 'tw-ml-2' : ''}>{item.value.toString()}</span>}\n </span>\n </div>\n </div>\n );\n};\n\nexport const SegmentedControls = ({\n id: propId,\n items,\n activeItemId,\n onChange,\n ariaLabel = 'SegmentedControls',\n disabled = false,\n}: SegmentedControlsProps): ReactElement => {\n const id = useMemoizedId(propId);\n const groupProps = { onChange, value: activeItemId, label: ariaLabel, isDisabled: disabled };\n const radioGroupState = useRadioGroupState(groupProps);\n const { radioGroupProps } = useRadioGroup(groupProps, radioGroupState);\n const itemElements = useMemo(() => {\n return items.map((item) => (\n <SegmentedControlsItem\n id={id}\n item={item}\n disabled={disabled}\n radioGroupState={radioGroupState}\n key={`fondue-segmented-controls-${id}-item-${item.id}`}\n />\n ));\n }, [items, id, disabled, radioGroupState]);\n const selectedIndex = items.findIndex((item) => item.id === radioGroupState.selectedValue);\n\n return (\n <div className=\"tw-flex\">\n <fieldset\n {...radioGroupProps}\n data-test-id=\"fondue-segmented-controls\"\n className=\"tw-relative tw-h-9 tw-w-full tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly tw-p-0 tw-border tw-border-black-20 tw-m-0 tw-bg-black-0 tw-rounded tw-font-sans tw-text-s tw-select-none\"\n >\n <motion.div\n aria-hidden=\"true\"\n // div border is not included in width so it must be subtracted from translation.\n animate={{ x: `calc(${100 selectedIndex}% - ${2 * selectedIndex}px)` }}\n initial={false}\n transition={{ type: 'tween', duration: 0.3 }}\n style={{\n width: `${100 / items.length}%`,\n }}\n hidden={!activeItemId}\n className={merge([\n 'tw-absolute tw--inset-px tw-h-full tw-box-content tw-border tw-rounded tw-pointer-events-none',\n disabled\n ? 'tw-border-line-x-strong tw-border-opacity-30 tw-bg-black-0'\n : 'tw-border-black tw-bg-white',\n ])}\n />\n {itemElements}\n </fieldset>\n </div>\n );\n};\nSegmentedControls.displayName = 'FondueSegmentedControls';\n"],"names":["isIconItem","item","SegmentedControlsItem","props","id","disabled","radioGroupState","ref","useRef","isActive","inputProps","useRadio","isFocusVisible","focusProps","useFocusRing","handleMockLabelClick","_a","setInteractionModality","getSegmentedControlsItemTestId","React","merge","FOCUS_STYLE","VisuallyHidden","SegmentedControls","propId","items","activeItemId","onChange","ariaLabel","useMemoizedId","groupProps","useRadioGroupState","radioGroupProps","useRadioGroup","itemElements","useMemo","selectedIndex","motion"],"mappings":"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"}

package/dist/components/Switch/Switch.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { FC, MouseEvent } from 'react';
+import { MouseEvent, ReactElement } from 'react';
 import { InputLabelTooltipProps } from '../InputLabel/InputLabel';
 export declare const SWITCH_ID = "switch-container";
 export type SwitchSize = 'small' | 'medium';
@@ -16,4 +16,7 @@ export type SwitchProps = {
     tooltip?: InputLabelTooltipProps;
     onChange?: (e: MouseEvent) => void;
 };
-export declare const Switch: FC<SwitchProps>;
+export declare const Switch: {
+    ({ id: propId, name, label, disabled, onChange, size, mode, labelStyle, hug, tooltip, }: SwitchProps): ReactElement;
+    displayName: string;
+};

package/dist/components/Switch/Switch.es.js.map CHANGED Viewed

	@@ -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 const SWITCH_ID = 'switch-container';\n\nexport type SwitchSize = 'small' \| 'medium';\n\nexport type SwitchMode = 'on' \| 'off' \| 'indeterminate';\n\nexport type SwitchLabelStyle = 'default' \| 'heading';\n\nconst trackSizeClasses: Record<SwitchSize, string> = {\n small: 'tw-w-[22px] tw-h-3',\n medium: 'tw-w-[30px] tw-h-4',\n};\n\nconst dotSizeClasses: Record<SwitchSize, Record<'dimensions' \| 'activeWidth' \| 'activeTranslation', string>> = {\n small: {\n dimensions: 'tw-w-3 tw-h-3',\n activeWidth: 'group-active:tw-w-[14px]',\n activeTranslation: 'tw-translate-x-[9px]',\n },\n medium: {\n dimensions: 'tw-w-4 tw-h-4',\n activeWidth: 'group-active:tw-w-[18px]',\n activeTranslation: 'tw-translate-x-[13px]',\n },\n};\n\nconst indeterminateLineClasses = 'tw-w-2 tw-h-[1px]';\n\nexport type SwitchProps = {\n id?: string;\n mode?: SwitchMode;\n disabled?: boolean;\n label?: string;\n labelStyle?: 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 = 'medium',\n mode = 'off',\n labelStyle = 'default',\n hug = false,\n tooltip,\n}) => {\n const id = useMemoizedId(propId);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n // The track on which the dot moves\n const trackClasses = useMemo(() => {\n const baseClasses = 'tw-group tw-border tw-inline-flex tw-rounded-full tw-shrink-0 tw-p-0 tw-transition-colors';\n\n const trueOrFalseValueClasses =\n mode === 'on'\n ? 'tw-bg-text-weak tw-border-line-xx-strong hover:tw-bg-text'\n : 'tw-bg-box-neutral tw-border-line-x-strong hover:tw-bg-box-neutral-hover';\n\n const valueClasses =\n mode === 'indeterminate'\n ? 'tw-bg-text-weak tw-flex tw-items-center tw-justify-center hover:tw-bg-text'\n : trueOrFalseValueClasses;\n\n const trueOrFalseDisabledClasses = disabled\n ? 'tw-bg-box-disabled tw-border-line tw-pointer-events-none'\n : valueClasses;\n\n const disabledClasses =\n disabled && mode === 'indeterminate'\n ? 'tw-flex tw-items-center tw-justify-center tw-bg-box-disabled tw-border-line tw-pointer-events-none'\n : trueOrFalseDisabledClasses;\n\n return merge([baseClasses, disabledClasses, trackSizeClasses[size], isFocusVisible && FOCUS_STYLE]);\n }, [mode, disabled, size, isFocusVisible]);\n\n // Responsible for the left-right translation\n const dotWrapperClasses = useMemo(() => {\n const baseClasses = 'tw-relative tw-self-center tw-transition-transform';\n\n const trueOrFalseValueClasses = mode === 'on' ? dotSizeClasses[size].activeTranslation : '';\n\n const valueClasses = mode === 'indeterminate' ? 'tw-bg-base' : trueOrFalseValueClasses;\n\n const disabledClasses = disabled && mode === 'indeterminate' ? 'tw-bg-text-disabled' : valueClasses;\n\n return merge([\n baseClasses,\n mode === 'indeterminate' ? indeterminateLineClasses : dotSizeClasses[size].dimensions,\n disabledClasses,\n ]);\n }, [disabled, mode, size]);\n\n // Responsible for dot styling and width animation on hover\n const dotClasses = useMemo(() => {\n const baseClasses =\n 'tw-border tw-bg-base tw-rounded-full tw-absolute tw-block tw-self-center tw-transition-width tw-duration-75';\n\n const trueOrFalseValueClasses = mode === 'on' ? 'tw-right-0 tw-translate-x-px' : 'tw-left-0';\n\n const valueClasses = mode === 'indeterminate' ? 'tw-hidden' : trueOrFalseValueClasses;\n\n const disabledStateClasses = disabled\n ? 'tw-border-line-strong'\n : merge(['tw-bg-base tw-border-line-xx-strong', dotSizeClasses[size].activeWidth]);\n\n return merge([\n baseClasses,\n mode === 'indeterminate' ? indeterminateLineClasses : dotSizeClasses[size].dimensions,\n valueClasses,\n disabledStateClasses,\n ]);\n }, [mode, disabled, size]);\n\n // Wraps the InputLabel instance and switch element\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_ID}>\n {label && (\n <InputLabel clickable={true} htmlFor={id} disabled={disabled} tooltip={tooltip}>\n {labelStyle === 'default' ? (\n <span data-test-id=\"switch-label-wrapper\" className=\"tw-font-medium tw-text-text-weak\">\n {label}\n </span>\n ) : (\n <span data-test-id=\"switch-label-wrapper\" className=\"tw-font-bold tw-text-text\">\n {label}\n </span>\n )}\n </InputLabel>\n )}\n <button\n {...focusProps}\n id={id}\n disabled={disabled}\n name={name}\n data-test-id=\"switch\"\n className={trackClasses}\n value={mode}\n onClick={onChange}\n type=\"button\"\n >\n <div className={dotWrapperClasses}>\n <div className={dotClasses} />\n </div>\n </button>\n </div>\n );\n};\nSwitch.displayName = 'FondueSwitch';\n"],"names":["SWITCH_ID","trackSizeClasses","dotSizeClasses","indeterminateLineClasses","Switch","propId","name","label","disabled","onChange","size","mode","labelStyle","hug","tooltip","id","useMemoizedId","isFocusVisible","focusProps","useFocusRing","trackClasses","useMemo","merge","FOCUS_STYLE","dotWrapperClasses","baseClasses","trueOrFalseValueClasses","disabledClasses","dotClasses","valueClasses","disabledStateClasses","containerClasses","React","InputLabel"],"mappings":";;;;;;AASO,MAAMA,IAAY,oBAQnBC,IAA+C;AAAA,EACjD,OAAO;AAAA,EACP,QAAQ;AACZ,GAEMC,IAAyG;AAAA,EAC3G,OAAO;AAAA,IACH,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,mBAAmB;AAAA,EACvB;AAAA,EACA,QAAQ;AAAA,IACJ,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,mBAAmB;AAAA,EACvB;AACJ,GAEMC,IAA2B,qBAepBC,~~IAA0B~~,CAAC;AAAA,~~EACpC~~,IAAIC;AAAA,EACJ,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,YAAAC,IAAa;AAAA,EACb,KAAAC,IAAM;AAAA,EACN,SAAAC;AACJ,~~MAAM~~;~~AACI~~,QAAAC,IAAKC,EAAcX,CAAM,GACzB,EAAE,gBAAAY,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAG9CC,IAAeC,EAAQ,MAsBlBC,EAAM,CArBO,6FAiBhBd,KAAYG,MAAS,kBACf,uGANyBH,IAC7B,6DALFG,MAAS,kBACH,+EANNA,MAAS,OACH,8DACA,2EAgBkCV,EAAiBS,CAAI,GAAGO,KAAkBM,CAAW,CAAC,GACnG,CAACZ,GAAMH,GAAUE,GAAMO,CAAc,CAAC,GAGnCO,IAAoBH,EAAQ,MAAM;AACpC,UAAMI,IAAc,sDAEdC,IAA0Bf,MAAS,OAAOT,EAAeQ,CAAI,EAAE,oBAAoB,IAInFiB,IAAkBnB,KAAYG,MAAS,kBAAkB,wBAF1CA,MAAS,kBAAkB,eAAee;AAI/D,WAAOJ,EAAM;AAAA,MACTG;AAAA,MACAd,MAAS,kBAAkBR,IAA2BD,EAAeQ,CAAI,EAAE;AAAA,MAC3EiB;AAAA,IAAA,CACH;AAAA,EACF,GAAA,CAACnB,GAAUG,GAAMD,CAAI,CAAC,GAGnBkB,IAAaP,EAAQ,MAAM;AAC7B,UAAMI,IACF,+GAIEI,IAAelB,MAAS,kBAAkB,cAFhBA,MAAS,OAAO,kCAAkC,aAI5EmB,IAAuBtB,IACvB,0BACAc,EAAM,CAAC,uCAAuCpB,EAAeQ,CAAI,EAAE,WAAW,CAAC;AAErF,WAAOY,EAAM;AAAA,MACTG;AAAA,MACAd,MAAS,kBAAkBR,IAA2BD,EAAeQ,CAAI,EAAE;AAAA,MAC3EmB;AAAA,MACAC;AAAA,IAAA,CACH;AAAA,EACF,GAAA,CAACnB,GAAMH,GAAUE,CAAI,CAAC,GAGnBqB,IAAmBV,EAAQ,MACtBC,EAAM,CAAC,+CAA+CT,IAAM,mBAAmB,SAAS,CAAC,GACjG,CAACA,CAAG,CAAC;AAER,SACK,gBAAAmB,EAAA,cAAA,OAAA,EAAI,WAAWD,GAAkB,gBAAc/B,EAC3C,GAAAO,KACI,gBAAAyB,EAAA,cAAAC,GAAA,EAAW,WAAW,IAAM,SAASlB,GAAI,UAAAP,GAAoB,SAAAM,EACzD,GAAAF,MAAe,YACZ,gBAAAoB,EAAA,cAAC,QAAK,EAAA,gBAAa,wBAAuB,WAAU,sCAC/CzB,CACL,IAEC,gBAAAyB,EAAA,cAAA,QAAA,EAAK,gBAAa,wBAAuB,WAAU,4BAC/C,GAAAzB,CACL,CAER,GAEJ,gBAAAyB,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGd;AAAA,MACJ,IAAAH;AAAA,MACA,UAAAP;AAAA,MACA,MAAAF;AAAA,MACA,gBAAa;AAAA,MACb,WAAWc;AAAA,MACX,OAAOT;AAAA,MACP,SAASF;AAAA,MACT,MAAK;AAAA,IAAA;AAAA,IAEL,gBAAAuB,EAAA,cAAC,SAAI,WAAWR,EAAA,mCACX,OAAI,EAAA,WAAWI,EAAY,CAAA,CAChC;AAAA,EAAA,CAER;AAER;AACAxB,EAAO,cAAc;"}
1	+ {"version":3,"file":"Switch.es.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { MouseEvent, ReactElement, 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 const SWITCH_ID = 'switch-container';\n\nexport type SwitchSize = 'small' \| 'medium';\n\nexport type SwitchMode = 'on' \| 'off' \| 'indeterminate';\n\nexport type SwitchLabelStyle = 'default' \| 'heading';\n\nconst trackSizeClasses: Record<SwitchSize, string> = {\n small: 'tw-w-[22px] tw-h-3',\n medium: 'tw-w-[30px] tw-h-4',\n};\n\nconst dotSizeClasses: Record<SwitchSize, Record<'dimensions' \| 'activeWidth' \| 'activeTranslation', string>> = {\n small: {\n dimensions: 'tw-w-3 tw-h-3',\n activeWidth: 'group-active:tw-w-[14px]',\n activeTranslation: 'tw-translate-x-[9px]',\n },\n medium: {\n dimensions: 'tw-w-4 tw-h-4',\n activeWidth: 'group-active:tw-w-[18px]',\n activeTranslation: 'tw-translate-x-[13px]',\n },\n};\n\nconst indeterminateLineClasses = 'tw-w-2 tw-h-[1px]';\n\nexport type SwitchProps = {\n id?: string;\n mode?: SwitchMode;\n disabled?: boolean;\n label?: string;\n labelStyle?: string;\n name?: string;\n size?: SwitchSize;\n hug?: boolean;\n tooltip?: InputLabelTooltipProps;\n onChange?: (e: MouseEvent) => void;\n};\n\nexport const Switch = ({\n id: propId,\n name,\n label,\n disabled,\n onChange,\n size = 'medium',\n mode = 'off',\n labelStyle = 'default',\n hug = false,\n tooltip,\n}: SwitchProps): ReactElement => {\n const id = useMemoizedId(propId);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n // The track on which the dot moves\n const trackClasses = useMemo(() => {\n const baseClasses = 'tw-group tw-border tw-inline-flex tw-rounded-full tw-shrink-0 tw-p-0 tw-transition-colors';\n\n const trueOrFalseValueClasses =\n mode === 'on'\n ? 'tw-bg-text-weak tw-border-line-xx-strong hover:tw-bg-text'\n : 'tw-bg-box-neutral tw-border-line-x-strong hover:tw-bg-box-neutral-hover';\n\n const valueClasses =\n mode === 'indeterminate'\n ? 'tw-bg-text-weak tw-flex tw-items-center tw-justify-center hover:tw-bg-text'\n : trueOrFalseValueClasses;\n\n const trueOrFalseDisabledClasses = disabled\n ? 'tw-bg-box-disabled tw-border-line tw-pointer-events-none'\n : valueClasses;\n\n const disabledClasses =\n disabled && mode === 'indeterminate'\n ? 'tw-flex tw-items-center tw-justify-center tw-bg-box-disabled tw-border-line tw-pointer-events-none'\n : trueOrFalseDisabledClasses;\n\n return merge([baseClasses, disabledClasses, trackSizeClasses[size], isFocusVisible && FOCUS_STYLE]);\n }, [mode, disabled, size, isFocusVisible]);\n\n // Responsible for the left-right translation\n const dotWrapperClasses = useMemo(() => {\n const baseClasses = 'tw-relative tw-self-center tw-transition-transform';\n\n const trueOrFalseValueClasses = mode === 'on' ? dotSizeClasses[size].activeTranslation : '';\n\n const valueClasses = mode === 'indeterminate' ? 'tw-bg-base' : trueOrFalseValueClasses;\n\n const disabledClasses = disabled && mode === 'indeterminate' ? 'tw-bg-text-disabled' : valueClasses;\n\n return merge([\n baseClasses,\n mode === 'indeterminate' ? indeterminateLineClasses : dotSizeClasses[size].dimensions,\n disabledClasses,\n ]);\n }, [disabled, mode, size]);\n\n // Responsible for dot styling and width animation on hover\n const dotClasses = useMemo(() => {\n const baseClasses =\n 'tw-border tw-bg-base tw-rounded-full tw-absolute tw-block tw-self-center tw-transition-width tw-duration-75';\n\n const trueOrFalseValueClasses = mode === 'on' ? 'tw-right-0 tw-translate-x-px' : 'tw-left-0';\n\n const valueClasses = mode === 'indeterminate' ? 'tw-hidden' : trueOrFalseValueClasses;\n\n const disabledStateClasses = disabled\n ? 'tw-border-line-strong'\n : merge(['tw-bg-base tw-border-line-xx-strong', dotSizeClasses[size].activeWidth]);\n\n return merge([\n baseClasses,\n mode === 'indeterminate' ? indeterminateLineClasses : dotSizeClasses[size].dimensions,\n valueClasses,\n disabledStateClasses,\n ]);\n }, [mode, disabled, size]);\n\n // Wraps the InputLabel instance and switch element\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_ID}>\n {label && (\n <InputLabel clickable={true} htmlFor={id} disabled={disabled} tooltip={tooltip}>\n {labelStyle === 'default' ? (\n <span data-test-id=\"switch-label-wrapper\" className=\"tw-font-medium tw-text-text-weak\">\n {label}\n </span>\n ) : (\n <span data-test-id=\"switch-label-wrapper\" className=\"tw-font-bold tw-text-text\">\n {label}\n </span>\n )}\n </InputLabel>\n )}\n <button\n {...focusProps}\n id={id}\n disabled={disabled}\n name={name}\n data-test-id=\"switch\"\n className={trackClasses}\n value={mode}\n onClick={onChange}\n type=\"button\"\n >\n <div className={dotWrapperClasses}>\n <div className={dotClasses} />\n </div>\n </button>\n </div>\n );\n};\nSwitch.displayName = 'FondueSwitch';\n"],"names":["SWITCH_ID","trackSizeClasses","dotSizeClasses","indeterminateLineClasses","Switch","propId","name","label","disabled","onChange","size","mode","labelStyle","hug","tooltip","id","useMemoizedId","isFocusVisible","focusProps","useFocusRing","trackClasses","useMemo","merge","FOCUS_STYLE","dotWrapperClasses","baseClasses","trueOrFalseValueClasses","disabledClasses","dotClasses","valueClasses","disabledStateClasses","containerClasses","React","InputLabel"],"mappings":"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"}

package/dist/components/Table/Table.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Key, PropsWithChildren, ReactNode } from 'react';
+import { Key, ReactNode } from 'react';
 export declare enum SelectionMode {
     NoSelect = "none",
     SingleSelect = "single",
@@ -19,7 +19,7 @@ export type Row = {
     cells: Record<string, Cell>;
     actionElements?: ReactNode;
 };
-export type TableProps = PropsWithChildren<{
+export type TableProps = {
     columns: Column[];
     rows: Row[];
     onSelectionChange?: (ids?: Key[]) => void;
@@ -27,7 +27,8 @@ export type TableProps = PropsWithChildren<{
     selectionMode?: SelectionMode;
     selectedRowIds?: Key[];
     ariaLabel?: string;
-}>;
+    children?: ReactNode;
+};
 export declare enum SortDirection {
     Ascending = "ascending",
     Descending = "descending"

package/dist/components/Table/Table.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.es.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport {\n Cell as AriaCell,\n Column as AriaColumn,\n Row as AriaRow,\n TableBody,\n TableHeader,\n TableStateProps,\n useTableState,\n} from '@react-stately/table';\nimport React, { Key, PropsWithChildren, ReactNode, useRef, useState } from 'react';\nimport { TableCell, TableCellType } from './TableCell';\nimport { TableColumnHeader, TableColumnHeaderType } from './TableColumnHeader';\nimport { TableHeaderRow } from './TableHeaderRow';\nimport { TableRow } from './TableRow';\n\nexport enum SelectionMode {\n NoSelect = 'none',\n SingleSelect = 'single',\n MultiSelect = 'multiple',\n}\n\nexport type Cell = {\n sortId: string \| number;\n value: ReactNode;\n ariaLabel?: string;\n};\n\nexport type Column = {\n name: string;\n key: string;\n sortable?: boolean;\n};\n\nexport type Row = {\n key: Key;\n // cell keys have to correspond to column key values\n // e.g. Column { name: 'User', key: 'user' } ==> Row Cell { user: { id: 'anna', value: 'Anna' } }\n cells: Record<string, Cell>;\n actionElements?: ReactNode;\n};\n\nexport type TableProps = PropsWithChildren<{\n columns: Column[];\n rows: Row[];\n onSelectionChange?: (ids?: Key[]) => void;\n onSortChange?: (column: string, direction?: SortDirection) => void;\n selectionMode?: SelectionMode;\n selectedRowIds?: Key[];\n ariaLabel?: string;\n}>;\n\nexport enum SortDirection {\n Ascending = 'ascending',\n Descending = 'descending',\n}\n\nconst DEFAULT_SORT_ORDER = SortDirection.Descending;\n\ntype SortType = {\n sortedColumnKey?: string;\n sortOrder?: SortDirection;\n};\n\n/ react-aria hook props types are inexplicitly typed */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst mapToTableAriaProps = (columns: Column[], rows: Row[], hasSort = false): TableStateProps<any> => {\n return {\n children: [\n <TableHeader key=\"table-header\" columns={columns}>\n {(column) => {\n const allowsSorting = !!(column.sortable && hasSort);\n return <AriaColumn allowsSorting={allowsSorting}>{column.name}</AriaColumn>;\n }}\n </TableHeader>,\n <TableBody key=\"table-body\" items={rows}>\n {(item) => (\n <AriaRow>\n {(columnKey) => (\n <AriaCell key={`${item.key}-${columnKey}`} aria-label={item.cells[columnKey].ariaLabel}>\n {item.cells[columnKey].value}\n </AriaCell>\n )}\n </AriaRow>\n )}\n </TableBody>,\n ],\n };\n};\n\nconst getRowFromId = (rows: Row[], id: Key) => rows.find(({ key }) => key === id) \|\| null;\n\nconst getAllRowIds = (rows: Row[]): Key[] => rows.map(({ key: id }) => id);\n\nexport const Table = ({\n columns,\n rows,\n onSelectionChange,\n selectionMode = SelectionMode.NoSelect,\n onSortChange: onSort,\n selectedRowIds = [],\n ariaLabel = 'Table',\n}: TableProps) => {\n const isSelectTable = selectionMode === SelectionMode.SingleSelect \|\| selectionMode === SelectionMode.MultiSelect;\n const [{ sortedColumnKey, sortOrder }, setSortedColumn] = useState<SortType>({\n sortedColumnKey: undefined,\n sortOrder: undefined,\n });\n\n const onSortChange = (column: string, direction?: SortDirection) => {\n const inverseSortDirection =\n direction === SortDirection.Ascending ? SortDirection.Descending : SortDirection.Ascending;\n setSortedColumn({\n sortedColumnKey: column,\n sortOrder: sortedColumnKey !== column ? DEFAULT_SORT_ORDER : inverseSortDirection,\n });\n onSort?.(column, direction);\n };\n\n const rowIds = getAllRowIds(rows);\n const ref = useRef<HTMLTableElement \| null>(null);\n const props = mapToTableAriaProps(columns, rows, !!onSort);\n const state = useTableState({\n ...props,\n selectionMode,\n showSelectionCheckboxes: isSelectTable,\n });\n const { collection } = state;\n\n return (\n <div className=\"tw-w-full tw-max-h-96 sm:tw-max-h-full\">\n <table\n aria-label={ariaLabel}\n ref={ref}\n className=\"tw-border-collapse tw-table-auto tw-w-full tw-min-w-max tw-text-left dark:tw-bg-black-100 dark:tw-text-black-20\"\n >\n <thead>\n {collection.headerRows.map((headerRow) => (\n <TableHeaderRow key={headerRow.key}>\n {[...headerRow.childNodes].map((column) => {\n const headerType = column.props.isSelectionCell\n ? TableColumnHeaderType.SelectAll\n : TableColumnHeaderType.Default;\n\n return (\n <TableColumnHeader\n key={column.key}\n column={column}\n type={headerType}\n rowIds={rowIds}\n sortDirection={sortOrder}\n selectionMode={selectionMode}\n isColumnSorted={sortedColumnKey === column.key}\n handleSortChange={onSortChange}\n setSelectedRows={onSelectionChange}\n />\n );\n })}\n <td />\n </TableHeaderRow>\n ))}\n </thead>\n <tbody>\n {[...collection.body.childNodes].map((ariaRow) => {\n const row = getRowFromId(rows, ariaRow.key);\n\n return (\n <TableRow key={ariaRow.key} isSelected={selectedRowIds.includes(ariaRow.key)}>\n {[...ariaRow.childNodes].map((cell) => {\n const cellType = cell.props.isSelectionCell\n ? TableCellType.Checkbox\n : TableCellType.Default;\n return (\n <TableCell\n key={cell.key}\n cell={cell}\n selectionMode={selectionMode}\n type={cellType}\n isChecked={selectedRowIds.includes(ariaRow.key)}\n selectedRows={selectedRowIds}\n setSelectedRows={onSelectionChange}\n />\n );\n })}\n {row?.actionElements && (\n <td className=\"tw-sticky tw-right-0\" data-test-id=\"table-actions\">\n <div className=\"tw-float-right hover:tw-bg-gradient-to-r hover:tw-from-transparent hover:tw-to-black-0 dark:hover:tw-to-black-95 tw-py-4 tw-pr-8 tw-pl-4\">\n {row.actionElements}\n </div>\n </td>\n )}\n </TableRow>\n );\n })}\n </tbody>\n </table>\n </div>\n );\n};\nTable.displayName = 'FondueTable';\n"],"names":["SelectionMode","SortDirection","DEFAULT_SORT_ORDER","mapToTableAriaProps","columns","rows","hasSort","TableHeader","column","allowsSorting","React","AriaColumn","TableBody","item","AriaRow","columnKey","AriaCell","getRowFromId","id","key","getAllRowIds","Table","onSelectionChange","selectionMode","onSort","selectedRowIds","ariaLabel","isSelectTable","sortedColumnKey","sortOrder","setSortedColumn","useState","onSortChange","direction","rowIds","ref","useRef","props","state","useTableState","collection","headerRow","TableHeaderRow","headerType","TableColumnHeaderType","TableColumnHeader","ariaRow","row","TableRow","cell","cellType","TableCellType","TableCell"],"mappings":"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"}
1	+ {"version":3,"file":"Table.es.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport {\n Cell as AriaCell,\n Column as AriaColumn,\n Row as AriaRow,\n TableBody,\n TableHeader,\n TableStateProps,\n useTableState,\n} from '@react-stately/table';\nimport React, { Key, ReactNode, useRef, useState } from 'react';\nimport { TableCell, TableCellType } from './TableCell';\nimport { TableColumnHeader, TableColumnHeaderType } from './TableColumnHeader';\nimport { TableHeaderRow } from './TableHeaderRow';\nimport { TableRow } from './TableRow';\n\nexport enum SelectionMode {\n NoSelect = 'none',\n SingleSelect = 'single',\n MultiSelect = 'multiple',\n}\n\nexport type Cell = {\n sortId: string \| number;\n value: ReactNode;\n ariaLabel?: string;\n};\n\nexport type Column = {\n name: string;\n key: string;\n sortable?: boolean;\n};\n\nexport type Row = {\n key: Key;\n // cell keys have to correspond to column key values\n // e.g. Column { name: 'User', key: 'user' } ==> Row Cell { user: { id: 'anna', value: 'Anna' } }\n cells: Record<string, Cell>;\n actionElements?: ReactNode;\n};\n\nexport type TableProps = {\n columns: Column[];\n rows: Row[];\n onSelectionChange?: (ids?: Key[]) => void;\n onSortChange?: (column: string, direction?: SortDirection) => void;\n selectionMode?: SelectionMode;\n selectedRowIds?: Key[];\n ariaLabel?: string;\n children?: ReactNode;\n};\n\nexport enum SortDirection {\n Ascending = 'ascending',\n Descending = 'descending',\n}\n\nconst DEFAULT_SORT_ORDER = SortDirection.Descending;\n\ntype SortType = {\n sortedColumnKey?: string;\n sortOrder?: SortDirection;\n};\n\n/ react-aria hook props types are inexplicitly typed */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst mapToTableAriaProps = (columns: Column[], rows: Row[], hasSort = false): TableStateProps<any> => {\n return {\n children: [\n <TableHeader key=\"table-header\" columns={columns}>\n {(column) => {\n const allowsSorting = !!(column.sortable && hasSort);\n return <AriaColumn allowsSorting={allowsSorting}>{column.name}</AriaColumn>;\n }}\n </TableHeader>,\n <TableBody key=\"table-body\" items={rows}>\n {(item) => (\n <AriaRow>\n {(columnKey) => (\n <AriaCell key={`${item.key}-${columnKey}`} aria-label={item.cells[columnKey].ariaLabel}>\n {item.cells[columnKey].value}\n </AriaCell>\n )}\n </AriaRow>\n )}\n </TableBody>,\n ],\n };\n};\n\nconst getRowFromId = (rows: Row[], id: Key) => rows.find(({ key }) => key === id) \|\| null;\n\nconst getAllRowIds = (rows: Row[]): Key[] => rows.map(({ key: id }) => id);\n\nexport const Table = ({\n columns,\n rows,\n onSelectionChange,\n selectionMode = SelectionMode.NoSelect,\n onSortChange: onSort,\n selectedRowIds = [],\n ariaLabel = 'Table',\n}: TableProps) => {\n const isSelectTable = selectionMode === SelectionMode.SingleSelect \|\| selectionMode === SelectionMode.MultiSelect;\n const [{ sortedColumnKey, sortOrder }, setSortedColumn] = useState<SortType>({\n sortedColumnKey: undefined,\n sortOrder: undefined,\n });\n\n const onSortChange = (column: string, direction?: SortDirection) => {\n const inverseSortDirection =\n direction === SortDirection.Ascending ? SortDirection.Descending : SortDirection.Ascending;\n setSortedColumn({\n sortedColumnKey: column,\n sortOrder: sortedColumnKey !== column ? DEFAULT_SORT_ORDER : inverseSortDirection,\n });\n onSort?.(column, direction);\n };\n\n const rowIds = getAllRowIds(rows);\n const ref = useRef<HTMLTableElement \| null>(null);\n const props = mapToTableAriaProps(columns, rows, !!onSort);\n const state = useTableState({\n ...props,\n selectionMode,\n showSelectionCheckboxes: isSelectTable,\n });\n const { collection } = state;\n\n return (\n <div className=\"tw-w-full tw-max-h-96 sm:tw-max-h-full\">\n <table\n aria-label={ariaLabel}\n ref={ref}\n className=\"tw-border-collapse tw-table-auto tw-w-full tw-min-w-max tw-text-left dark:tw-bg-black-100 dark:tw-text-black-20\"\n >\n <thead>\n {collection.headerRows.map((headerRow) => (\n <TableHeaderRow key={headerRow.key}>\n {[...headerRow.childNodes].map((column) => {\n const headerType = column.props.isSelectionCell\n ? TableColumnHeaderType.SelectAll\n : TableColumnHeaderType.Default;\n\n return (\n <TableColumnHeader\n key={column.key}\n column={column}\n type={headerType}\n rowIds={rowIds}\n sortDirection={sortOrder}\n selectionMode={selectionMode}\n isColumnSorted={sortedColumnKey === column.key}\n handleSortChange={onSortChange}\n setSelectedRows={onSelectionChange}\n />\n );\n })}\n <td />\n </TableHeaderRow>\n ))}\n </thead>\n <tbody>\n {[...collection.body.childNodes].map((ariaRow) => {\n const row = getRowFromId(rows, ariaRow.key);\n\n return (\n <TableRow key={ariaRow.key} isSelected={selectedRowIds.includes(ariaRow.key)}>\n {[...ariaRow.childNodes].map((cell) => {\n const cellType = cell.props.isSelectionCell\n ? TableCellType.Checkbox\n : TableCellType.Default;\n return (\n <TableCell\n key={cell.key}\n cell={cell}\n selectionMode={selectionMode}\n type={cellType}\n isChecked={selectedRowIds.includes(ariaRow.key)}\n selectedRows={selectedRowIds}\n setSelectedRows={onSelectionChange}\n />\n );\n })}\n {row?.actionElements && (\n <td className=\"tw-sticky tw-right-0\" data-test-id=\"table-actions\">\n <div className=\"tw-float-right hover:tw-bg-gradient-to-r hover:tw-from-transparent hover:tw-to-black-0 dark:hover:tw-to-black-95 tw-py-4 tw-pr-8 tw-pl-4\">\n {row.actionElements}\n </div>\n </td>\n )}\n </TableRow>\n );\n })}\n </tbody>\n </table>\n </div>\n );\n};\nTable.displayName = 'FondueTable';\n"],"names":["SelectionMode","SortDirection","DEFAULT_SORT_ORDER","mapToTableAriaProps","columns","rows","hasSort","TableHeader","column","allowsSorting","React","AriaColumn","TableBody","item","AriaRow","columnKey","AriaCell","getRowFromId","id","key","getAllRowIds","Table","onSelectionChange","selectionMode","onSort","selectedRowIds","ariaLabel","isSelectTable","sortedColumnKey","sortOrder","setSortedColumn","useState","onSortChange","direction","rowIds","ref","useRef","props","state","useTableState","collection","headerRow","TableHeaderRow","headerType","TableColumnHeaderType","TableColumnHeader","ariaRow","row","TableRow","cell","cellType","TableCellType","TableCell"],"mappings":"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"}

package/dist/components/Tabs/TabItem.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { FC, ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { BadgeProps } from '../Badge';
 export type TabItemProps = {
     id: string;
@@ -9,6 +9,9 @@ export type TabItemProps = {
     badge?: BadgeProps;
     children: ReactNode;
 };
-export declare const TabItem: FC<TabItemProps & {
-    active?: boolean;
-}>;
+export declare const TabItem: {
+    ({ active, disabled, children, id }: TabItemProps & {
+        active?: boolean | undefined;
+    }): ReactElement;
+    displayName: string;
+};

package/dist/components/Tabs/TabItem.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabItem.es.js","sources":["../../../src/components/Tabs/TabItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ~~FC,~~ ReactElement, ReactNode, useRef } from 'react';\nimport { BadgeProps } from '@components/Badge';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { checkIfContainInteractiveElements } from '@utilities/elements';\n\nexport type TabItemProps = {\n id: string;\n label: string;\n onClick?: () => void;\n disabled?: boolean;\n decorator?: ReactElement;\n badge?: BadgeProps;\n children: ReactNode;\n};\n\nexport const TabItem: ~~FC<TabItemProps & { active?: boolean }>~~ = ({ active, disabled, children, id }) => {\n const { isFocusVisible, focusProps } = useFocusRing();\n const ref = useRef<HTMLDivElement \| null>(null);\n const hasInteractiveElements = checkIfContainInteractiveElements(ref.current);\n\n return (\n <div\n role=\"tabpanel\"\n ref={ref}\n id={`${id}-content`}\n aria-labelledby={id}\n className={merge([!active \|\| disabled ? 'tw-hidden' : '', isFocusVisible && FOCUS_STYLE])}\n tabIndex={hasInteractiveElements ? -1 : 0}\n {...focusProps}\n >\n {children}\n </div>\n );\n};\nTabItem.displayName = 'FondueTabItem';\n"],"names":["TabItem","active","disabled","children","id","isFocusVisible","focusProps","useFocusRing","ref","useRef","hasInteractiveElements","checkIfContainInteractiveElements","React","merge","FOCUS_STYLE"],"mappings":";;;;;AAmBO,MAAMA,~~IAAmD~~,CAAC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,UAAAC,GAAU,IAAAC,~~QAAS~~;~~AACpG~~,QAAM,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAC9CC,IAAMC,EAA8B,IAAI,GACxCC,IAAyBC,EAAkCH,EAAI,OAAO;AAGxE,SAAA,gBAAAI,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,KAAAJ;AAAA,MACA,IAAI,GAAGJ;AAAA,MACP,mBAAiBA;AAAA,MACjB,WAAWS,EAAM,CAAC,CAACZ,KAAUC,IAAW,cAAc,IAAIG,KAAkBS,CAAW,CAAC;AAAA,MACxF,UAAUJ,IAAyB,KAAK;AAAA,MACvC,GAAGJ;AAAA,IAAA;AAAA,IAEHH;AAAA,EAAA;AAGb;AACAH,EAAQ,cAAc;"}
1	+ {"version":3,"file":"TabItem.es.js","sources":["../../../src/components/Tabs/TabItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement, ReactNode, useRef } from 'react';\nimport { BadgeProps } from '@components/Badge';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { checkIfContainInteractiveElements } from '@utilities/elements';\n\nexport type TabItemProps = {\n id: string;\n label: string;\n onClick?: () => void;\n disabled?: boolean;\n decorator?: ReactElement;\n badge?: BadgeProps;\n children: ReactNode;\n};\n\nexport const TabItem = ({ active, disabled, children, id }: TabItemProps & { active?: boolean }): ReactElement => {\n const { isFocusVisible, focusProps } = useFocusRing();\n const ref = useRef<HTMLDivElement \| null>(null);\n const hasInteractiveElements = checkIfContainInteractiveElements(ref.current);\n\n return (\n <div\n role=\"tabpanel\"\n ref={ref}\n id={`${id}-content`}\n aria-labelledby={id}\n className={merge([!active \|\| disabled ? 'tw-hidden' : '', isFocusVisible && FOCUS_STYLE])}\n tabIndex={hasInteractiveElements ? -1 : 0}\n {...focusProps}\n >\n {children}\n </div>\n );\n};\nTabItem.displayName = 'FondueTabItem';\n"],"names":["TabItem","active","disabled","children","id","isFocusVisible","focusProps","useFocusRing","ref","useRef","hasInteractiveElements","checkIfContainInteractiveElements","React","merge","FOCUS_STYLE"],"mappings":";;;;;AAmBO,MAAMA,IAAU,CAAC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,UAAAC,GAAU,IAAAC,QAA4D;AAC9G,QAAM,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAC9CC,IAAMC,EAA8B,IAAI,GACxCC,IAAyBC,EAAkCH,EAAI,OAAO;AAGxE,SAAA,gBAAAI,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,KAAAJ;AAAA,MACA,IAAI,GAAGJ;AAAA,MACP,mBAAiBA;AAAA,MACjB,WAAWS,EAAM,CAAC,CAACZ,KAAUC,IAAW,cAAc,IAAIG,KAAkBS,CAAW,CAAC;AAAA,MACxF,UAAUJ,IAAyB,KAAK;AAAA,MACvC,GAAGJ;AAAA,IAAA;AAAA,IAEHH;AAAA,EAAA;AAGb;AACAH,EAAQ,cAAc;"}

package/dist/components/Tabs/Tabs.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 export declare enum TabsPaddingX {
     Small = "Small",
     Medium = "Medium",
@@ -15,4 +15,7 @@ export type TabsProps = {
     children: ReactNode;
     onChange?: (tabId: string) => void;
 };
-export declare const Tabs: FC<TabsProps>;
+export declare const Tabs: {
+    ({ paddingX, size, activeItemId, children, onChange }: TabsProps): ReactElement;
+    displayName: string;
+};

package/dist/components/Tabs/Tabs.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.es.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, {\n Children,\n FC,\n KeyboardEvent,\n ReactNode,\n cloneElement,\n isValidElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { TabItemProps } from '@components/Tabs/TabItem';\nimport { merge } from '@utilities/merge';\nimport { IconDotsHorizontal } from '@foundation/Icon/Generated';\nimport { Badge } from '@components/Badge';\nimport { motion } from 'framer-motion';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nexport enum TabsPaddingX {\n Small = 'Small',\n Medium = 'Medium',\n Large = 'Large',\n}\n\nexport enum TabSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport type TabsProps = {\n paddingX?: TabsPaddingX;\n size?: TabSize;\n activeItemId: string;\n children: ReactNode;\n onChange?: (tabId: string) => void;\n};\n\nconst paddingMap: Record<TabsPaddingX, string> = {\n [TabsPaddingX.Small]: 'tw-pl-s',\n [TabsPaddingX.Medium]: 'tw-pl-m',\n [TabsPaddingX.Large]: 'tw-pl-l',\n};\n\nexport const Tabs: FC<TabsProps> = ({ paddingX, size, activeItemId, children, onChange }) => {\n const groupId = useMemoizedId();\n const tabNavRef = useRef<HTMLDivElement \| null>(null);\n const [isOverflowing, setIsOverflowing] = useState(false);\n const [isMenuOpened, setIsMenuOpened] = useState(false);\n\n const tabs: TabItemProps[] =\n Children.map(children, (child) => {\n if (!isValidElement<TabItemProps>(child)) {\n return null;\n }\n return child?.props;\n }) ?? [];\n\n const [overflowArray, setOverflowArray] = useState([0]);\n\n const checkIfOverflowing = useCallback(() => {\n const tabNav = tabNavRef.current;\n setIsOverflowing((tabNav && tabNav.scrollWidth > tabNav.clientWidth) ?? false);\n const overFlowIndex = [];\n if (tabNav) {\n for (const tabItem of tabNav.children) {\n const i = [...tabNav.children].indexOf(tabItem);\n const navPosition = tabNav.getBoundingClientRect();\n const tabPosition = tabItem.getBoundingClientRect();\n if (tabPosition.right > navPosition.right \|\| tabPosition.left < navPosition.left) {\n overFlowIndex.push(i);\n }\n }\n\n const overFlowIndexInAscOrder = [...overFlowIndex].sort((a, b) => a - b);\n setOverflowArray(overFlowIndexInAscOrder);\n }\n }, []);\n\n const getOverflownTabs = () => {\n return overflowArray.map((i) => {\n return tabs[i];\n });\n };\n\n const filterTabList = (array: TabItemProps[], direction: string) => {\n const activeItemIndex = array.findIndex((tab) => tab.id === activeItemId);\n\n return array.filter((tab, index) => {\n if (direction === 'next') {\n if (index > activeItemIndex && !tab.disabled) {\n return tab;\n }\n }\n\n if (direction === 'previous') {\n if (index < activeItemIndex && !tab.disabled) {\n return tab;\n }\n }\n\n return false;\n });\n };\n\n const handleKeyboardTabChange = (event: KeyboardEvent<HTMLButtonElement>) => {\n const overflownTabs = getOverflownTabs();\n const target = event.target as HTMLElement;\n const fromOverflow = target.id.includes('-m');\n const currentTabId = target.id.replace('-btn-m', '');\n const currentTabsArray = fromOverflow ? overflownTabs : tabs;\n\n const nextTabs = filterTabList(currentTabsArray, 'next');\n const previousTabs = filterTabList(currentTabsArray, 'previous');\n\n if ((event.key === 'ArrowRight' \|\| event.key === 'ArrowDown') && nextTabs.length > 0) {\n triggerTabButton(nextTabs[0].id, fromOverflow);\n }\n\n if ((event.key === 'ArrowLeft' \|\| event.key === 'ArrowUp') && previousTabs.length > 0) {\n triggerTabButton(previousTabs[previousTabs.length - 1].id, fromOverflow);\n }\n\n if (event.key === 'Enter' && fromOverflow) {\n triggerTabButton(currentTabId, true);\n setIsMenuOpened(false);\n const contentSection = document.getElementById(`${currentTabId}-content`) as HTMLDivElement;\n contentSection.focus();\n }\n\n if (!target.id.includes('-m')) {\n setIsMenuOpened(false);\n }\n };\n\n const triggerTabButton = (elementId: string, fromOverflow: boolean) => {\n try {\n const tabElement = document.getElementById(`${elementId}-btn`) as HTMLButtonElement;\n const buttonElement = document.getElementById(\n fromOverflow ? `${elementId}-btn-m` : `${elementId}-btn`,\n ) as HTMLButtonElement;\n if (onChange) {\n onChange(elementId);\n }\n if (isOverflowing) {\n tabElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });\n }\n buttonElement.focus();\n } catch (error) {\n throw (error as Error).message;\n }\n };\n\n const triggerOverflowMenu = (event: KeyboardEvent<HTMLButtonElement>) => {\n checkIfOverflowing();\n const overflownTabs = getOverflownTabs();\n\n if (event.key === 'Enter') {\n if (!isMenuOpened && overflownTabs.length > 0) {\n const buttonElement = document.getElementById(`${overflownTabs[0].id}-btn-m`) as HTMLButtonElement;\n if (buttonElement) {\n buttonElement.focus();\n }\n }\n }\n\n if (isMenuOpened && (event.key === 'ArrowRight' \|\| event.key === 'ArrowDown')) {\n triggerTabButton(overflownTabs[0].id, true);\n }\n };\n\n // First render\n useEffect(() => {\n checkIfOverflowing();\n }, [checkIfOverflowing]);\n\n useEffect(() => {\n window.addEventListener('resize', checkIfOverflowing);\n return () => {\n window.removeEventListener('resize', checkIfOverflowing);\n };\n }, [checkIfOverflowing]);\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <>\n <div data-test-id=\"tabs\" className=\"tw-flex tw-relative tw-border-b tw-border-line\">\n <div\n ref={tabNavRef}\n role=\"tablist\"\n className={merge([\n 'tw-overflow-x-hidden tw-flex-shrink-0 tw-h-full tw-w-full tw-flex tw-justify-start tw-pr-8',\n paddingMap[paddingX ?? TabsPaddingX.Small],\n size === TabSize.Small ? 'tw-gap-xxs' : 'tw-gap-xs ',\n ])}\n >\n {tabs.map((tab) => {\n return (\n <button\n data-test-id=\"tab-item\"\n role=\"tab\"\n type=\"button\"\n aria-selected={tab.id === activeItemId}\n aria-controls={`${tab.id}-content`}\n aria-hidden={tab.disabled}\n tabIndex={tab.id === activeItemId ? 0 : -1}\n id={`${tab.id}-btn`}\n className={merge([\n 'tw-group tw-relative tw-mx-0 tw-py-4 tw-px-2 tw-w-max tw-cursor-pointer tw-flex tw-items-center tw-justify-center tw-whitespace-nowrap',\n tab.disabled && 'tw-text-text-disabled',\n tab.id === activeItemId ? 'tw-font-medium tw-text-text' : 'tw-text-text-weak',\n size === TabSize.Small ? 'tw-text-sm' : 'tw-text-md',\n ])}\n key={tab.id}\n onClick={() => {\n if (!tab.disabled) {\n triggerTabButton(tab.id, false);\n setIsMenuOpened(false);\n }\n }}\n onKeyDown={(event) => handleKeyboardTabChange(event)}\n >\n {tab.decorator && <span className=\"tw-mr-1.5\">{tab.decorator}</span>}\n\n <span>{tab.label}</span>\n\n {tab.badge && (\n <Badge disabled={tab.disabled} style={tab.badge.style}>\n {tab.badge.children}\n </Badge>\n )}\n {tab.id === activeItemId && (\n <motion.div\n initial={false}\n layoutDependency={activeItemId}\n data-test-id=\"tab-active-highlight\"\n layoutId={groupId}\n className=\"tw-absolute tw-h-[3px] tw-bg-violet-60 tw-rounded-t-x-large tw-w-full tw-bottom-0\"\n />\n )}\n {tab.id !== activeItemId && !tab.disabled && (\n <div className=\"group-hover:tw-absolute group-hover:tw-h-[3px] group-hover:tw-bg-box-neutral-hover group-hover:tw-rounded-t-x-large group-hover:tw-w-full group-hover:tw-bottom-0\" />\n )}\n </button>\n );\n })}\n </div>\n {isOverflowing && (\n <div\n data-test-id=\"tab-overflow\"\n className=\"tw-absolute tw-right-3 tw-bottom-0 tw-top-0 tw-flex tw-justify-center tw-items-center\"\n >\n <button\n className={merge([\n 'tw-w-6 tw-h-6 tw-bg-box-neutral tw-rounded tw-flex tw-justify-center tw-items-center',\n isFocusVisible ? FOCUS_STYLE : '',\n ])}\n type=\"button\"\n onClick={() => {\n checkIfOverflowing();\n setIsMenuOpened(!isMenuOpened);\n }}\n onKeyDown={(event) => triggerOverflowMenu(event)}\n {...focusProps}\n >\n <IconDotsHorizontal />\n </button>\n {isMenuOpened && (\n <div\n className=\"tw-absolute tw-right-0 tw-top-11 tw-px-3 tw-pt-3 tw-bg-base tw-shadow tw-w-max\"\n role=\"dialog\"\n >\n {getOverflownTabs().map((tab) => {\n return (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-w-full tw-mb-3 tw-text-left tw-text-text-weak',\n tab.disabled && 'tw-text-text-disabled',\n ])}\n key={tab.id}\n onClick={() => {\n if (!tab.disabled) {\n triggerTabButton(tab.id, true);\n setIsMenuOpened(false);\n }\n }}\n role=\"tab\"\n type=\"button\"\n aria-selected={tab.id === activeItemId}\n aria-controls={`${tab.id}-content`}\n aria-hidden={tab.disabled}\n tabIndex={!tab.disabled && isMenuOpened ? 0 : -1}\n id={`${tab.id}-btn-m`}\n onKeyDown={(event) => handleKeyboardTabChange(event)}\n >\n {tab.decorator}\n <span className=\"tw-mr-1 tw-ml-1.5\">{tab.label}</span>\n {tab.badge && (\n <Badge disabled={tab.disabled} style={tab.badge?.style}>\n {tab.badge?.children}\n </Badge>\n )}\n </button>\n );\n })}\n </div>\n )}\n </div>\n )}\n </div>\n\n <div data-test-id=\"tab-content\">\n {Children.map(children, (child) => {\n if (!isValidElement(child)) {\n return null;\n }\n\n return cloneElement(child, { ...child.props, active: child.props.id === activeItemId });\n })}\n </div>\n </>\n );\n};\nTabs.displayName = 'FondueTabs';\n"],"names":["TabsPaddingX","TabSize","paddingMap","Tabs","paddingX","size","activeItemId","children","onChange","groupId","useMemoizedId","tabNavRef","useRef","isOverflowing","setIsOverflowing","useState","isMenuOpened","setIsMenuOpened","tabs","Children","child","isValidElement","overflowArray","setOverflowArray","checkIfOverflowing","useCallback","tabNav","overFlowIndex","tabItem","navPosition","tabPosition","overFlowIndexInAscOrder","a","b","getOverflownTabs","i","filterTabList","array","direction","activeItemIndex","tab","index","handleKeyboardTabChange","event","overflownTabs","target","fromOverflow","currentTabId","currentTabsArray","nextTabs","previousTabs","triggerTabButton","elementId","tabElement","buttonElement","error","triggerOverflowMenu","useEffect","isFocusVisible","focusProps","useFocusRing","React","merge","Badge","motion","FOCUS_STYLE","IconDotsHorizontal","_a","_b","cloneElement"],"mappings":"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"}
1	+ {"version":3,"file":"Tabs.es.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, {\n Children,\n KeyboardEvent,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { TabItemProps } from '@components/Tabs/TabItem';\nimport { merge } from '@utilities/merge';\nimport { IconDotsHorizontal } from '@foundation/Icon/Generated';\nimport { Badge } from '@components/Badge';\nimport { motion } from 'framer-motion';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nexport enum TabsPaddingX {\n Small = 'Small',\n Medium = 'Medium',\n Large = 'Large',\n}\n\nexport enum TabSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport type TabsProps = {\n paddingX?: TabsPaddingX;\n size?: TabSize;\n activeItemId: string;\n children: ReactNode;\n onChange?: (tabId: string) => void;\n};\n\nconst paddingMap: Record<TabsPaddingX, string> = {\n [TabsPaddingX.Small]: 'tw-pl-s',\n [TabsPaddingX.Medium]: 'tw-pl-m',\n [TabsPaddingX.Large]: 'tw-pl-l',\n};\n\nexport const Tabs = ({ paddingX, size, activeItemId, children, onChange }: TabsProps): ReactElement => {\n const groupId = useMemoizedId();\n const tabNavRef = useRef<HTMLDivElement \| null>(null);\n const [isOverflowing, setIsOverflowing] = useState(false);\n const [isMenuOpened, setIsMenuOpened] = useState(false);\n\n const tabs: TabItemProps[] =\n Children.map(children, (child) => {\n if (!isValidElement<TabItemProps>(child)) {\n return null;\n }\n return child?.props;\n }) ?? [];\n\n const [overflowArray, setOverflowArray] = useState([0]);\n\n const checkIfOverflowing = useCallback(() => {\n const tabNav = tabNavRef.current;\n setIsOverflowing((tabNav && tabNav.scrollWidth > tabNav.clientWidth) ?? false);\n const overFlowIndex = [];\n if (tabNav) {\n for (const tabItem of tabNav.children) {\n const i = [...tabNav.children].indexOf(tabItem);\n const navPosition = tabNav.getBoundingClientRect();\n const tabPosition = tabItem.getBoundingClientRect();\n if (tabPosition.right > navPosition.right \|\| tabPosition.left < navPosition.left) {\n overFlowIndex.push(i);\n }\n }\n\n const overFlowIndexInAscOrder = [...overFlowIndex].sort((a, b) => a - b);\n setOverflowArray(overFlowIndexInAscOrder);\n }\n }, []);\n\n const getOverflownTabs = () => {\n return overflowArray.map((i) => {\n return tabs[i];\n });\n };\n\n const filterTabList = (array: TabItemProps[], direction: string) => {\n const activeItemIndex = array.findIndex((tab) => tab.id === activeItemId);\n\n return array.filter((tab, index) => {\n if (direction === 'next') {\n if (index > activeItemIndex && !tab.disabled) {\n return tab;\n }\n }\n\n if (direction === 'previous') {\n if (index < activeItemIndex && !tab.disabled) {\n return tab;\n }\n }\n\n return false;\n });\n };\n\n const handleKeyboardTabChange = (event: KeyboardEvent<HTMLButtonElement>) => {\n const overflownTabs = getOverflownTabs();\n const target = event.target as HTMLElement;\n const fromOverflow = target.id.includes('-m');\n const currentTabId = target.id.replace('-btn-m', '');\n const currentTabsArray = fromOverflow ? overflownTabs : tabs;\n\n const nextTabs = filterTabList(currentTabsArray, 'next');\n const previousTabs = filterTabList(currentTabsArray, 'previous');\n\n if ((event.key === 'ArrowRight' \|\| event.key === 'ArrowDown') && nextTabs.length > 0) {\n triggerTabButton(nextTabs[0].id, fromOverflow);\n }\n\n if ((event.key === 'ArrowLeft' \|\| event.key === 'ArrowUp') && previousTabs.length > 0) {\n triggerTabButton(previousTabs[previousTabs.length - 1].id, fromOverflow);\n }\n\n if (event.key === 'Enter' && fromOverflow) {\n triggerTabButton(currentTabId, true);\n setIsMenuOpened(false);\n const contentSection = document.getElementById(`${currentTabId}-content`) as HTMLDivElement;\n contentSection.focus();\n }\n\n if (!target.id.includes('-m')) {\n setIsMenuOpened(false);\n }\n };\n\n const triggerTabButton = (elementId: string, fromOverflow: boolean) => {\n try {\n const tabElement = document.getElementById(`${elementId}-btn`) as HTMLButtonElement;\n const buttonElement = document.getElementById(\n fromOverflow ? `${elementId}-btn-m` : `${elementId}-btn`,\n ) as HTMLButtonElement;\n if (onChange) {\n onChange(elementId);\n }\n if (isOverflowing) {\n tabElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });\n }\n buttonElement.focus();\n } catch (error) {\n throw (error as Error).message;\n }\n };\n\n const triggerOverflowMenu = (event: KeyboardEvent<HTMLButtonElement>) => {\n checkIfOverflowing();\n const overflownTabs = getOverflownTabs();\n\n if (event.key === 'Enter') {\n if (!isMenuOpened && overflownTabs.length > 0) {\n const buttonElement = document.getElementById(`${overflownTabs[0].id}-btn-m`) as HTMLButtonElement;\n if (buttonElement) {\n buttonElement.focus();\n }\n }\n }\n\n if (isMenuOpened && (event.key === 'ArrowRight' \|\| event.key === 'ArrowDown')) {\n triggerTabButton(overflownTabs[0].id, true);\n }\n };\n\n // First render\n useEffect(() => {\n checkIfOverflowing();\n }, [checkIfOverflowing]);\n\n useEffect(() => {\n window.addEventListener('resize', checkIfOverflowing);\n return () => {\n window.removeEventListener('resize', checkIfOverflowing);\n };\n }, [checkIfOverflowing]);\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <>\n <div data-test-id=\"tabs\" className=\"tw-flex tw-relative tw-border-b tw-border-line\">\n <div\n ref={tabNavRef}\n role=\"tablist\"\n className={merge([\n 'tw-overflow-x-hidden tw-flex-shrink-0 tw-h-full tw-w-full tw-flex tw-justify-start tw-pr-8',\n paddingMap[paddingX ?? TabsPaddingX.Small],\n size === TabSize.Small ? 'tw-gap-xxs' : 'tw-gap-xs ',\n ])}\n >\n {tabs.map((tab) => {\n return (\n <button\n data-test-id=\"tab-item\"\n role=\"tab\"\n type=\"button\"\n aria-selected={tab.id === activeItemId}\n aria-controls={`${tab.id}-content`}\n aria-hidden={tab.disabled}\n tabIndex={tab.id === activeItemId ? 0 : -1}\n id={`${tab.id}-btn`}\n className={merge([\n 'tw-group tw-relative tw-mx-0 tw-py-4 tw-px-2 tw-w-max tw-cursor-pointer tw-flex tw-items-center tw-justify-center tw-whitespace-nowrap',\n tab.disabled && 'tw-text-text-disabled',\n tab.id === activeItemId ? 'tw-font-medium tw-text-text' : 'tw-text-text-weak',\n size === TabSize.Small ? 'tw-text-sm' : 'tw-text-md',\n ])}\n key={tab.id}\n onClick={() => {\n if (!tab.disabled) {\n triggerTabButton(tab.id, false);\n setIsMenuOpened(false);\n }\n }}\n onKeyDown={(event) => handleKeyboardTabChange(event)}\n >\n {tab.decorator && <span className=\"tw-mr-1.5\">{tab.decorator}</span>}\n\n <span>{tab.label}</span>\n\n {tab.badge && (\n <Badge disabled={tab.disabled} style={tab.badge.style}>\n {tab.badge.children}\n </Badge>\n )}\n {tab.id === activeItemId && (\n <motion.div\n initial={false}\n layoutDependency={activeItemId}\n data-test-id=\"tab-active-highlight\"\n layoutId={groupId}\n className=\"tw-absolute tw-h-[3px] tw-bg-violet-60 tw-rounded-t-x-large tw-w-full tw-bottom-0\"\n />\n )}\n {tab.id !== activeItemId && !tab.disabled && (\n <div className=\"group-hover:tw-absolute group-hover:tw-h-[3px] group-hover:tw-bg-box-neutral-hover group-hover:tw-rounded-t-x-large group-hover:tw-w-full group-hover:tw-bottom-0\" />\n )}\n </button>\n );\n })}\n </div>\n {isOverflowing && (\n <div\n data-test-id=\"tab-overflow\"\n className=\"tw-absolute tw-right-3 tw-bottom-0 tw-top-0 tw-flex tw-justify-center tw-items-center\"\n >\n <button\n className={merge([\n 'tw-w-6 tw-h-6 tw-bg-box-neutral tw-rounded tw-flex tw-justify-center tw-items-center',\n isFocusVisible ? FOCUS_STYLE : '',\n ])}\n type=\"button\"\n onClick={() => {\n checkIfOverflowing();\n setIsMenuOpened(!isMenuOpened);\n }}\n onKeyDown={(event) => triggerOverflowMenu(event)}\n {...focusProps}\n >\n <IconDotsHorizontal />\n </button>\n {isMenuOpened && (\n <div\n className=\"tw-absolute tw-right-0 tw-top-11 tw-px-3 tw-pt-3 tw-bg-base tw-shadow tw-w-max\"\n role=\"dialog\"\n >\n {getOverflownTabs().map((tab) => {\n return (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-w-full tw-mb-3 tw-text-left tw-text-text-weak',\n tab.disabled && 'tw-text-text-disabled',\n ])}\n key={tab.id}\n onClick={() => {\n if (!tab.disabled) {\n triggerTabButton(tab.id, true);\n setIsMenuOpened(false);\n }\n }}\n role=\"tab\"\n type=\"button\"\n aria-selected={tab.id === activeItemId}\n aria-controls={`${tab.id}-content`}\n aria-hidden={tab.disabled}\n tabIndex={!tab.disabled && isMenuOpened ? 0 : -1}\n id={`${tab.id}-btn-m`}\n onKeyDown={(event) => handleKeyboardTabChange(event)}\n >\n {tab.decorator}\n <span className=\"tw-mr-1 tw-ml-1.5\">{tab.label}</span>\n {tab.badge && (\n <Badge disabled={tab.disabled} style={tab.badge?.style}>\n {tab.badge?.children}\n </Badge>\n )}\n </button>\n );\n })}\n </div>\n )}\n </div>\n )}\n </div>\n\n <div data-test-id=\"tab-content\">\n {Children.map(children, (child) => {\n if (!isValidElement(child)) {\n return null;\n }\n\n return cloneElement(child, { ...child.props, active: child.props.id === activeItemId });\n })}\n </div>\n </>\n );\n};\nTabs.displayName = 'FondueTabs';\n"],"names":["TabsPaddingX","TabSize","paddingMap","Tabs","paddingX","size","activeItemId","children","onChange","groupId","useMemoizedId","tabNavRef","useRef","isOverflowing","setIsOverflowing","useState","isMenuOpened","setIsMenuOpened","tabs","Children","child","isValidElement","overflowArray","setOverflowArray","checkIfOverflowing","useCallback","tabNav","overFlowIndex","tabItem","navPosition","tabPosition","overFlowIndexInAscOrder","a","b","getOverflownTabs","i","filterTabList","array","direction","activeItemIndex","tab","index","handleKeyboardTabChange","event","overflownTabs","target","fromOverflow","currentTabId","currentTabsArray","nextTabs","previousTabs","triggerTabButton","elementId","tabElement","buttonElement","error","triggerOverflowMenu","useEffect","isFocusVisible","focusProps","useFocusRing","React","merge","Badge","motion","FOCUS_STYLE","IconDotsHorizontal","_a","_b","cloneElement"],"mappings":"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"}

package/dist/components/TextInput/TextInput.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Validation } from '../../utilities/validation';
-import { FC, FocusEvent, KeyboardEvent, ReactNode } from 'react';
+import { FocusEvent, KeyboardEvent, ReactElement, ReactNode } from 'react';
 export declare enum TextInputType {
     Text = "text",
     Password = "password",
@@ -41,4 +41,7 @@ export type TextInputProps = ({
     type: TextInputType.Password;
     obfuscated?: boolean;
 } & TextInputBaseProps);
-export declare const TextInput: FC<TextInputProps>;
+export declare const TextInput: {
+    ({ id: propId, type, decorator, validation, clearable, placeholder, required, obfuscated, disabled, autocomplete, dotted, value, copyable, onChange, onEnterPressed, onBlur, onClear, onFocus, size, spellcheck, readonly, focusOnMount, selectable, }: TextInputProps): ReactElement;
+    displayName: string;
+};

package/dist/components/TextInput/TextInput.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.es.js","sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { useCopy } from '@hooks/useCopy';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { FC, FocusEvent, KeyboardEvent, ReactNode, useEffect, useRef, useState } from 'react';\nimport {\n IconCheckMark,\n IconClipboard,\n IconCross,\n IconCrossCircle,\n IconExclamationMarkTriangle,\n IconEye,\n IconEyeOff,\n} from '@foundation/Icon/Generated';\n\nexport enum TextInputType {\n Text = 'text',\n Password = 'password',\n Number = 'number',\n}\n\nexport type TextInputBaseProps = {\n id?: string;\n type?: TextInputType;\n decorator?: ReactNode;\n dotted?: boolean;\n clearable?: boolean;\n placeholder?: string;\n required?: boolean;\n disabled?: boolean;\n autocomplete?: boolean;\n readonly?: boolean;\n validation?: Validation;\n copyable?: boolean;\n value?: string;\n onChange?: (value: string) => void;\n onEnterPressed?: (event: KeyboardEvent<HTMLInputElement>) => void;\n onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n onClear?: () => void;\n size?: number;\n spellcheck?: boolean;\n focusOnMount?: boolean;\n selectable?: boolean;\n};\n\nexport type TextInputProps =\n \| ({\n type?: TextInputType.Text;\n obfuscated?: false;\n } & TextInputBaseProps)\n \| ({\n type?: TextInputType.Number;\n obfuscated?: false;\n min?: number;\n max?: number;\n } & TextInputBaseProps)\n \| ({\n type: TextInputType.Password;\n obfuscated?: boolean;\n } & TextInputBaseProps);\n\nexport const TextInput: FC<TextInputProps> = ({\n id: propId,\n type = TextInputType.Text,\n decorator,\n validation = Validation.Default,\n clearable = false,\n placeholder,\n required,\n obfuscated,\n disabled = false,\n autocomplete = false,\n dotted = false,\n value = '',\n copyable = false,\n onChange,\n onEnterPressed,\n onBlur,\n onClear,\n onFocus,\n size,\n spellcheck,\n readonly,\n focusOnMount,\n selectable = false,\n}) => {\n const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n const { isFocusVisible: clearButtonIsFocusVisible, focusProps: clearButtonFocusProps } = useFocusRing();\n const { isFocusVisible: passwordButtonIsFocusVisible, focusProps: passwordButtonFocusProps } = useFocusRing();\n const { isFocusVisible: copyButtonIsFocusVisible, focusProps: copyButtonFocusProps } = useFocusRing();\n\n const { copy, status } = useCopy();\n\n const inputElement = useRef<HTMLInputElement \| null>(null);\n const [isObfuscated, setIsObfuscated] = useState(\n typeof obfuscated === 'boolean' ? obfuscated : type === TextInputType.Password,\n );\n\n useEffect(() => {\n setTimeout(() => {\n focusOnMount && inputElement.current?.focus();\n }, 0);\n }, [focusOnMount]);\n\n useEffect(() => {\n if (typeof obfuscated === 'boolean') {\n setIsObfuscated(obfuscated);\n }\n }, [obfuscated]);\n\n const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n onEnterPressed && onEnterPressed(event);\n }\n };\n\n const getInputType = () => {\n if (type === TextInputType.Password) {\n return isObfuscated ? TextInputType.Password : TextInputType.Text;\n }\n return type;\n };\n\n const spellcheckProp = typeof spellcheck === 'boolean' ? { spellCheck: spellcheck } : null;\n\n return (\n <div\n {...focusProps}\n className={merge([\n 'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border tw-transition tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n dotted ? 'tw-border-dashed' : 'tw-border-solid',\n disabled \|\| readonly\n ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n : merge([\n 'focus-within:tw-border-black-90 hover:tw-border-black-90',\n validationClassMap[validation],\n isFocusVisible &&\n !clearButtonIsFocusVisible &&\n !passwordButtonIsFocusVisible &&\n !copyButtonIsFocusVisible &&\n FOCUS_STYLE,\n ]),\n ])}\n data-test-id=\"fondue-text-input-component\"\n >\n {decorator && (\n <div\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-pl-1',\n disabled ? 'tw-text-black-60' : 'tw-text-black-80',\n ])}\n data-test-id=\"decorator\"\n >\n {decorator}\n </div>\n )}\n <input\n id={useMemoizedId(propId)}\n ref={inputElement}\n className={merge([\n 'tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows',\n disabled \|\| readonly\n ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n ])}\n onClick={() => inputElement.current?.focus()}\n onChange={(event) => onChange && onChange(event.currentTarget.value)}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n value={value}\n type={getInputType()}\n required={required}\n readOnly={readonly}\n disabled={disabled}\n onFocus={(e) => {\n if (selectable) {\n e.target.select();\n }\n if (onFocus) {\n onFocus(e);\n }\n }}\n autoComplete={autocomplete ? 'on' : 'off'}\n size={size}\n data-test-id=\"text-input\"\n {...spellcheckProp}\n />\n {`${value}`.length > 0 && clearable && (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n clearButtonIsFocusVisible && FOCUS_STYLE,\n ])}\n onClick={() => {\n inputElement.current?.focus();\n inputElement.current?.setAttribute('value', '');\n\n onChange && onChange('');\n onClear && onClear();\n }}\n data-test-id=\"clear-icon\"\n title=\"Clear text input\"\n aria-label=\"clear text input\"\n disabled={disabled}\n type=\"button\"\n {...clearButtonFocusProps}\n >\n <IconCross />\n </button>\n )}\n {type === TextInputType.Password && (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n passwordButtonIsFocusVisible && FOCUS_STYLE,\n ])}\n onClick={() => setIsObfuscated(!isObfuscated)}\n data-test-id=\"visibility-icon\"\n title=\"Toggle text visibility\"\n type=\"button\"\n aria-label={`${isObfuscated ? 'unveil' : 'obfuscate'} text input`}\n disabled={disabled}\n {...passwordButtonFocusProps}\n >\n {isObfuscated ? <IconEye /> : <IconEyeOff />}\n </button>\n )}\n {validation === Validation.Loading && (\n <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n </span>\n )}\n {(validation === Validation.Error \|\| validation === Validation.Warning) && (\n <span\n className={merge([\n 'tw-flex tw-items-center tw-justify-center',\n validation === Validation.Error && 'tw-text-text-negative',\n validation === Validation.Warning && 'tw-text-text-warning',\n ])}\n data-test-id=\"error-state-exclamation-mark-icon\"\n >\n <IconExclamationMarkTriangle />\n </span>\n )}\n {copyable && (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n copyButtonIsFocusVisible && FOCUS_STYLE,\n ])}\n onClick={() => copy(value)}\n data-test-id=\"copy-icon\"\n title=\"Copy input text\"\n disabled={disabled}\n type=\"button\"\n {...copyButtonFocusProps}\n >\n {status === 'error' && (\n <span className=\"tw-text-box-negative-strong\">\n <IconCrossCircle />\n </span>\n )}\n {status === 'idle' && <IconClipboard />}\n {status === 'success' && (\n <span className=\"tw-text-box-positive-strong\">\n <IconCheckMark />\n </span>\n )}\n </button>\n )}\n </div>\n );\n};\nTextInput.displayName = 'FondueTextInput';\n"],"names":["TextInputType","TextInput","propId","type","decorator","validation","Validation","clearable","placeholder","required","obfuscated","disabled","autocomplete","dotted","value","copyable","onChange","onEnterPressed","onBlur","onClear","onFocus","size","spellcheck","readonly","focusOnMount","selectable","isFocusVisible","focusProps","useFocusRing","clearButtonIsFocusVisible","clearButtonFocusProps","passwordButtonIsFocusVisible","passwordButtonFocusProps","copyButtonIsFocusVisible","copyButtonFocusProps","copy","status","useCopy","inputElement","useRef","isObfuscated","setIsObfuscated","useState","useEffect","_a","onKeyDown","event","getInputType","spellcheckProp","React","merge","validationClassMap","FOCUS_STYLE","useMemoizedId","_b","IconCross","IconEye","IconEyeOff","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle","IconCrossCircle","IconClipboard","IconCheckMark"],"mappings":"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"}
1	+ {"version":3,"file":"TextInput.es.js","sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { useCopy } from '@hooks/useCopy';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { FocusEvent, KeyboardEvent, ReactElement, ReactNode, useEffect, useRef, useState } from 'react';\nimport {\n IconCheckMark,\n IconClipboard,\n IconCross,\n IconCrossCircle,\n IconExclamationMarkTriangle,\n IconEye,\n IconEyeOff,\n} from '@foundation/Icon/Generated';\n\nexport enum TextInputType {\n Text = 'text',\n Password = 'password',\n Number = 'number',\n}\n\nexport type TextInputBaseProps = {\n id?: string;\n type?: TextInputType;\n decorator?: ReactNode;\n dotted?: boolean;\n clearable?: boolean;\n placeholder?: string;\n required?: boolean;\n disabled?: boolean;\n autocomplete?: boolean;\n readonly?: boolean;\n validation?: Validation;\n copyable?: boolean;\n value?: string;\n onChange?: (value: string) => void;\n onEnterPressed?: (event: KeyboardEvent<HTMLInputElement>) => void;\n onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n onClear?: () => void;\n size?: number;\n spellcheck?: boolean;\n focusOnMount?: boolean;\n selectable?: boolean;\n};\n\nexport type TextInputProps =\n \| ({\n type?: TextInputType.Text;\n obfuscated?: false;\n } & TextInputBaseProps)\n \| ({\n type?: TextInputType.Number;\n obfuscated?: false;\n min?: number;\n max?: number;\n } & TextInputBaseProps)\n \| ({\n type: TextInputType.Password;\n obfuscated?: boolean;\n } & TextInputBaseProps);\n\nexport const TextInput = ({\n id: propId,\n type = TextInputType.Text,\n decorator,\n validation = Validation.Default,\n clearable = false,\n placeholder,\n required,\n obfuscated,\n disabled = false,\n autocomplete = false,\n dotted = false,\n value = '',\n copyable = false,\n onChange,\n onEnterPressed,\n onBlur,\n onClear,\n onFocus,\n size,\n spellcheck,\n readonly,\n focusOnMount,\n selectable = false,\n}: TextInputProps): ReactElement => {\n const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n const { isFocusVisible: clearButtonIsFocusVisible, focusProps: clearButtonFocusProps } = useFocusRing();\n const { isFocusVisible: passwordButtonIsFocusVisible, focusProps: passwordButtonFocusProps } = useFocusRing();\n const { isFocusVisible: copyButtonIsFocusVisible, focusProps: copyButtonFocusProps } = useFocusRing();\n\n const { copy, status } = useCopy();\n\n const inputElement = useRef<HTMLInputElement \| null>(null);\n const [isObfuscated, setIsObfuscated] = useState(\n typeof obfuscated === 'boolean' ? obfuscated : type === TextInputType.Password,\n );\n\n useEffect(() => {\n setTimeout(() => {\n focusOnMount && inputElement.current?.focus();\n }, 0);\n }, [focusOnMount]);\n\n useEffect(() => {\n if (typeof obfuscated === 'boolean') {\n setIsObfuscated(obfuscated);\n }\n }, [obfuscated]);\n\n const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n onEnterPressed && onEnterPressed(event);\n }\n };\n\n const getInputType = () => {\n if (type === TextInputType.Password) {\n return isObfuscated ? TextInputType.Password : TextInputType.Text;\n }\n return type;\n };\n\n const spellcheckProp = typeof spellcheck === 'boolean' ? { spellCheck: spellcheck } : null;\n\n return (\n <div\n {...focusProps}\n className={merge([\n 'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border tw-transition tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n dotted ? 'tw-border-dashed' : 'tw-border-solid',\n disabled \|\| readonly\n ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n : merge([\n 'focus-within:tw-border-black-90 hover:tw-border-black-90',\n validationClassMap[validation],\n isFocusVisible &&\n !clearButtonIsFocusVisible &&\n !passwordButtonIsFocusVisible &&\n !copyButtonIsFocusVisible &&\n FOCUS_STYLE,\n ]),\n ])}\n data-test-id=\"fondue-text-input-component\"\n >\n {decorator && (\n <div\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-pl-1',\n disabled ? 'tw-text-black-60' : 'tw-text-black-80',\n ])}\n data-test-id=\"decorator\"\n >\n {decorator}\n </div>\n )}\n <input\n id={useMemoizedId(propId)}\n ref={inputElement}\n className={merge([\n 'tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows',\n disabled \|\| readonly\n ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n ])}\n onClick={() => inputElement.current?.focus()}\n onChange={(event) => onChange && onChange(event.currentTarget.value)}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n value={value}\n type={getInputType()}\n required={required}\n readOnly={readonly}\n disabled={disabled}\n onFocus={(e) => {\n if (selectable) {\n e.target.select();\n }\n if (onFocus) {\n onFocus(e);\n }\n }}\n autoComplete={autocomplete ? 'on' : 'off'}\n size={size}\n data-test-id=\"text-input\"\n {...spellcheckProp}\n />\n {`${value}`.length > 0 && clearable && (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n clearButtonIsFocusVisible && FOCUS_STYLE,\n ])}\n onClick={() => {\n inputElement.current?.focus();\n inputElement.current?.setAttribute('value', '');\n\n onChange && onChange('');\n onClear && onClear();\n }}\n data-test-id=\"clear-icon\"\n title=\"Clear text input\"\n aria-label=\"clear text input\"\n disabled={disabled}\n type=\"button\"\n {...clearButtonFocusProps}\n >\n <IconCross />\n </button>\n )}\n {type === TextInputType.Password && (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n passwordButtonIsFocusVisible && FOCUS_STYLE,\n ])}\n onClick={() => setIsObfuscated(!isObfuscated)}\n data-test-id=\"visibility-icon\"\n title=\"Toggle text visibility\"\n type=\"button\"\n aria-label={`${isObfuscated ? 'unveil' : 'obfuscate'} text input`}\n disabled={disabled}\n {...passwordButtonFocusProps}\n >\n {isObfuscated ? <IconEye /> : <IconEyeOff />}\n </button>\n )}\n {validation === Validation.Loading && (\n <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n </span>\n )}\n {(validation === Validation.Error \|\| validation === Validation.Warning) && (\n <span\n className={merge([\n 'tw-flex tw-items-center tw-justify-center',\n validation === Validation.Error && 'tw-text-text-negative',\n validation === Validation.Warning && 'tw-text-text-warning',\n ])}\n data-test-id=\"error-state-exclamation-mark-icon\"\n >\n <IconExclamationMarkTriangle />\n </span>\n )}\n {copyable && (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n copyButtonIsFocusVisible && FOCUS_STYLE,\n ])}\n onClick={() => copy(value)}\n data-test-id=\"copy-icon\"\n title=\"Copy input text\"\n disabled={disabled}\n type=\"button\"\n {...copyButtonFocusProps}\n >\n {status === 'error' && (\n <span className=\"tw-text-box-negative-strong\">\n <IconCrossCircle />\n </span>\n )}\n {status === 'idle' && <IconClipboard />}\n {status === 'success' && (\n <span className=\"tw-text-box-positive-strong\">\n <IconCheckMark />\n </span>\n )}\n </button>\n )}\n </div>\n );\n};\nTextInput.displayName = 'FondueTextInput';\n"],"names":["TextInputType","TextInput","propId","type","decorator","validation","Validation","clearable","placeholder","required","obfuscated","disabled","autocomplete","dotted","value","copyable","onChange","onEnterPressed","onBlur","onClear","onFocus","size","spellcheck","readonly","focusOnMount","selectable","isFocusVisible","focusProps","useFocusRing","clearButtonIsFocusVisible","clearButtonFocusProps","passwordButtonIsFocusVisible","passwordButtonFocusProps","copyButtonIsFocusVisible","copyButtonFocusProps","copy","status","useCopy","inputElement","useRef","isObfuscated","setIsObfuscated","useState","useEffect","_a","onKeyDown","event","getInputType","spellcheckProp","React","merge","validationClassMap","FOCUS_STYLE","useMemoizedId","_b","IconCross","IconEye","IconEyeOff","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle","IconCrossCircle","IconClipboard","IconCheckMark"],"mappings":"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"}

package/dist/components/Textarea/Textarea.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Validation } from '../../utilities/validation';
-import { FC, FocusEvent, ReactNode } from 'react';
+import { FocusEvent, ReactElement, ReactNode } from 'react';
 export type TextareaProps = {
     id?: string;
     value?: string;
@@ -19,4 +19,7 @@ export type TextareaProps = {
     resizeable?: boolean;
     selectable?: boolean;
 };
-export declare const Textarea: FC<TextareaProps>;
+export declare const Textarea: {
+    ({ id: propId, value, required, decorator, placeholder, disabled, onInput, onBlur, validation, minRows, maxRows, autosize, resizeable, onFocus, selectable, }: TextareaProps): ReactElement;
+    displayName: string;
+};

package/dist/components/Textarea/Textarea.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Textarea.es.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport React, { ~~FC,~~ FocusEvent, FormEvent, ReactNode } from 'react';\nimport TextareaAutosize, { TextareaAutosizeProps } from 'react-textarea-autosize';\nimport { IconExclamationMarkTriangle } from '@foundation/Icon/Generated';\n\nexport type TextareaProps = {\n id?: string;\n value?: string;\n required?: boolean;\n decorator?: ReactNode;\n placeholder?: string;\n disabled?: boolean;\n onInput?: (value: string) => void;\n onBlur?: (value: string) => void;\n onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;\n validation?: Validation;\n /* When autosize if false, this is used as 'rows' property for standard textarea /\n minRows?: number;\n /* When autosize if false, this property is ignored */\n maxRows?: number;\n autosize?: boolean;\n resizeable?: boolean;\n selectable?: boolean;\n};\n\nexport const Textarea: ~~FC<TextareaProps>~~ = ({\n id: propId,\n value,\n required = false,\n decorator,\n placeholder,\n disabled = false,\n onInput,\n onBlur,\n validation = Validation.Default,\n minRows,\n maxRows,\n autosize = false,\n resizeable = true,\n onFocus,\n selectable = false,\n}) => {\n const Component = autosize ? TextareaAutosize : 'textarea';\n\n const { isFocusVisible, focusProps } = useFocusRing({ isTextInput: true });\n\n const autosizeProps = { maxRows, minRows };\n\n return (\n <div className=\"tw-relative\">\n {decorator && (\n <div\n className=\"tw-absolute tw-top-2 tw-left-2 tw-inline-flex tw-items-end tw-text-black-80\"\n data-test-id=\"decorator\"\n >\n {decorator}\n </div>\n )}\n <Component\n {...(mergeProps(focusProps, {\n onBlur: (event: FocusEvent<HTMLTextAreaElement>) => onBlur && onBlur(event.target.value),\n onInput: (event: FormEvent<HTMLTextAreaElement>) =>\n onInput && onInput((event.target as HTMLTextAreaElement).value),\n }) as TextareaAutosizeProps)}\n {...(autosize ? autosizeProps : { rows: minRows })}\n id={useMemoizedId(propId)}\n value={value}\n placeholder={placeholder}\n required={required}\n className={merge([\n 'tw-w-full tw-p-2 tw-border tw-rounded tw-text-s tw-outline-none tw-transition tw-placeholder-black-60',\n !!decorator && 'tw-pl-7 ',\n disabled\n ? 'tw-border-black-5 tw-bg-black-5 tw-text-black-40'\n : 'tw-text-black tw-border-black-20 hover:tw-border-black-90',\n isFocusVisible && FOCUS_STYLE,\n validationClassMap[validation],\n !resizeable && 'tw-resize-none',\n validation === Validation.Error && 'tw-pr-8',\n ])}\n disabled={disabled}\n onFocus={(e) => {\n if (selectable) {\n e.target.select();\n }\n if (onFocus) {\n onFocus(e);\n }\n }}\n data-test-id=\"textarea\"\n />\n {validation === Validation.Loading && (\n <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n </span>\n )}\n {(validation === Validation.Error \|\| validation === Validation.Warning) && (\n <span\n className={merge([\n 'tw-absolute tw-top-[0.6rem] tw-right-[0.6rem]',\n validation === Validation.Error && 'tw-text-text-negative',\n validation === Validation.Warning && 'tw-text-text-warning',\n ])}\n data-test-id=\"error-state-exclamation-mark-icon\"\n >\n <IconExclamationMarkTriangle />\n </span>\n )}\n </div>\n );\n};\nTextarea.displayName = 'FondueTextarea';\n"],"names":["Textarea","propId","value","required","decorator","placeholder","disabled","onInput","onBlur","validation","Validation","minRows","maxRows","autosize","resizeable","onFocus","selectable","Component","TextareaAutosize","isFocusVisible","focusProps","useFocusRing","autosizeProps","React","mergeProps","event","useMemoizedId","merge","FOCUS_STYLE","validationClassMap","e","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle"],"mappings":";;;;;;;;;;AAiCO,MAAMA,~~IAA8B~~,CAAC;AAAA,~~EACxC~~,IAAIC;AAAA,EACJ,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC,IAAaC,EAAW;AAAA,EACxB,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,YAAAC,IAAa;AACjB,~~MAAM~~;~~AACI~~,QAAAC,IAAYJ,IAAWK,IAAmB,YAE1C,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa,EAAE,aAAa,IAAM,GAEnEC,IAAgB,EAAE,SAAAV,GAAS,SAAAD;AAEjC,SACK,gBAAAY,EAAA,cAAA,OAAA,EAAI,WAAU,cAAA,GACVnB,KACG,gBAAAmB,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,gBAAa;AAAA,IAAA;AAAA,IAEZnB;AAAA,EAGT,GAAA,gBAAAmB,EAAA;AAAA,IAACN;AAAA,IAAA;AAAA,MACI,GAAIO,EAAWJ,GAAY;AAAA,QACxB,QAAQ,CAACK,MAA2CjB,KAAUA,EAAOiB,EAAM,OAAO,KAAK;AAAA,QACvF,SAAS,CAACA,MACNlB,KAAWA,EAASkB,EAAM,OAA+B,KAAK;AAAA,MAAA,CACrE;AAAA,MACA,GAAIZ,IAAWS,IAAgB,EAAE,MAAMX,EAAQ;AAAA,MAChD,IAAIe,EAAczB,CAAM;AAAA,MACxB,OAAAC;AAAA,MACA,aAAAG;AAAA,MACA,UAAAF;AAAA,MACA,WAAWwB,EAAM;AAAA,QACb;AAAA,QACA,CAAC,CAACvB,KAAa;AAAA,QACfE,IACM,qDACA;AAAA,QACNa,KAAkBS;AAAA,QAClBC,EAAmBpB,CAAU;AAAA,QAC7B,CAACK,KAAc;AAAA,QACfL,MAAeC,EAAW,SAAS;AAAA,MAAA,CACtC;AAAA,MACD,UAAAJ;AAAA,MACA,SAAS,CAACwB,MAAM;AACZ,QAAId,KACAc,EAAE,OAAO,UAETf,KACAA,EAAQe,CAAC;AAAA,MAEjB;AAAA,MACA,gBAAa;AAAA,IAAA;AAAA,EACjB,GACCrB,MAAeC,EAAW,2CACtB,QAAK,EAAA,WAAU,2HACX,gBAAAa,EAAA,cAAAQ,GAAA,EAAc,MAAMC,EAAkB,YAAY,CACvD,IAEFvB,MAAeC,EAAW,SAASD,MAAeC,EAAW,YAC3D,gBAAAa,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWI,EAAM;AAAA,QACb;AAAA,QACAlB,MAAeC,EAAW,SAAS;AAAA,QACnCD,MAAeC,EAAW,WAAW;AAAA,MAAA,CACxC;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,oCAEZuB,GAA4B,IAAA;AAAA,EAAA,CAGzC;AAER;AACAjC,EAAS,cAAc;"}
1	+ {"version":3,"file":"Textarea.es.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport React, { FocusEvent, FormEvent, ReactElement, ReactNode } from 'react';\nimport TextareaAutosize, { TextareaAutosizeProps } from 'react-textarea-autosize';\nimport { IconExclamationMarkTriangle } from '@foundation/Icon/Generated';\n\nexport type TextareaProps = {\n id?: string;\n value?: string;\n required?: boolean;\n decorator?: ReactNode;\n placeholder?: string;\n disabled?: boolean;\n onInput?: (value: string) => void;\n onBlur?: (value: string) => void;\n onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;\n validation?: Validation;\n /* When autosize if false, this is used as 'rows' property for standard textarea /\n minRows?: number;\n /* When autosize if false, this property is ignored */\n maxRows?: number;\n autosize?: boolean;\n resizeable?: boolean;\n selectable?: boolean;\n};\n\nexport const Textarea = ({\n id: propId,\n value,\n required = false,\n decorator,\n placeholder,\n disabled = false,\n onInput,\n onBlur,\n validation = Validation.Default,\n minRows,\n maxRows,\n autosize = false,\n resizeable = true,\n onFocus,\n selectable = false,\n}: TextareaProps): ReactElement => {\n const Component = autosize ? TextareaAutosize : 'textarea';\n\n const { isFocusVisible, focusProps } = useFocusRing({ isTextInput: true });\n\n const autosizeProps = { maxRows, minRows };\n\n return (\n <div className=\"tw-relative\">\n {decorator && (\n <div\n className=\"tw-absolute tw-top-2 tw-left-2 tw-inline-flex tw-items-end tw-text-black-80\"\n data-test-id=\"decorator\"\n >\n {decorator}\n </div>\n )}\n <Component\n {...(mergeProps(focusProps, {\n onBlur: (event: FocusEvent<HTMLTextAreaElement>) => onBlur && onBlur(event.target.value),\n onInput: (event: FormEvent<HTMLTextAreaElement>) =>\n onInput && onInput((event.target as HTMLTextAreaElement).value),\n }) as TextareaAutosizeProps)}\n {...(autosize ? autosizeProps : { rows: minRows })}\n id={useMemoizedId(propId)}\n value={value}\n placeholder={placeholder}\n required={required}\n className={merge([\n 'tw-w-full tw-p-2 tw-border tw-rounded tw-text-s tw-outline-none tw-transition tw-placeholder-black-60',\n !!decorator && 'tw-pl-7 ',\n disabled\n ? 'tw-border-black-5 tw-bg-black-5 tw-text-black-40'\n : 'tw-text-black tw-border-black-20 hover:tw-border-black-90',\n isFocusVisible && FOCUS_STYLE,\n validationClassMap[validation],\n !resizeable && 'tw-resize-none',\n validation === Validation.Error && 'tw-pr-8',\n ])}\n disabled={disabled}\n onFocus={(e) => {\n if (selectable) {\n e.target.select();\n }\n if (onFocus) {\n onFocus(e);\n }\n }}\n data-test-id=\"textarea\"\n />\n {validation === Validation.Loading && (\n <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n </span>\n )}\n {(validation === Validation.Error \|\| validation === Validation.Warning) && (\n <span\n className={merge([\n 'tw-absolute tw-top-[0.6rem] tw-right-[0.6rem]',\n validation === Validation.Error && 'tw-text-text-negative',\n validation === Validation.Warning && 'tw-text-text-warning',\n ])}\n data-test-id=\"error-state-exclamation-mark-icon\"\n >\n <IconExclamationMarkTriangle />\n </span>\n )}\n </div>\n );\n};\nTextarea.displayName = 'FondueTextarea';\n"],"names":["Textarea","propId","value","required","decorator","placeholder","disabled","onInput","onBlur","validation","Validation","minRows","maxRows","autosize","resizeable","onFocus","selectable","Component","TextareaAutosize","isFocusVisible","focusProps","useFocusRing","autosizeProps","React","mergeProps","event","useMemoizedId","merge","FOCUS_STYLE","validationClassMap","e","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle"],"mappings":";;;;;;;;;;AAiCO,MAAMA,IAAW,CAAC;AAAA,EACrB,IAAIC;AAAA,EACJ,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC,IAAaC,EAAW;AAAA,EACxB,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,YAAAC,IAAa;AACjB,MAAmC;AACzB,QAAAC,IAAYJ,IAAWK,IAAmB,YAE1C,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa,EAAE,aAAa,IAAM,GAEnEC,IAAgB,EAAE,SAAAV,GAAS,SAAAD;AAEjC,SACK,gBAAAY,EAAA,cAAA,OAAA,EAAI,WAAU,cAAA,GACVnB,KACG,gBAAAmB,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,gBAAa;AAAA,IAAA;AAAA,IAEZnB;AAAA,EAGT,GAAA,gBAAAmB,EAAA;AAAA,IAACN;AAAA,IAAA;AAAA,MACI,GAAIO,EAAWJ,GAAY;AAAA,QACxB,QAAQ,CAACK,MAA2CjB,KAAUA,EAAOiB,EAAM,OAAO,KAAK;AAAA,QACvF,SAAS,CAACA,MACNlB,KAAWA,EAASkB,EAAM,OAA+B,KAAK;AAAA,MAAA,CACrE;AAAA,MACA,GAAIZ,IAAWS,IAAgB,EAAE,MAAMX,EAAQ;AAAA,MAChD,IAAIe,EAAczB,CAAM;AAAA,MACxB,OAAAC;AAAA,MACA,aAAAG;AAAA,MACA,UAAAF;AAAA,MACA,WAAWwB,EAAM;AAAA,QACb;AAAA,QACA,CAAC,CAACvB,KAAa;AAAA,QACfE,IACM,qDACA;AAAA,QACNa,KAAkBS;AAAA,QAClBC,EAAmBpB,CAAU;AAAA,QAC7B,CAACK,KAAc;AAAA,QACfL,MAAeC,EAAW,SAAS;AAAA,MAAA,CACtC;AAAA,MACD,UAAAJ;AAAA,MACA,SAAS,CAACwB,MAAM;AACZ,QAAId,KACAc,EAAE,OAAO,UAETf,KACAA,EAAQe,CAAC;AAAA,MAEjB;AAAA,MACA,gBAAa;AAAA,IAAA;AAAA,EACjB,GACCrB,MAAeC,EAAW,2CACtB,QAAK,EAAA,WAAU,2HACX,gBAAAa,EAAA,cAAAQ,GAAA,EAAc,MAAMC,EAAkB,YAAY,CACvD,IAEFvB,MAAeC,EAAW,SAASD,MAAeC,EAAW,YAC3D,gBAAAa,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWI,EAAM;AAAA,QACb;AAAA,QACAlB,MAAeC,EAAW,SAAS;AAAA,QACnCD,MAAeC,EAAW,WAAW;AAAA,MAAA,CACxC;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,oCAEZuB,GAA4B,IAAA;AAAA,EAAA,CAGzC;AAER;AACAjC,EAAS,cAAc;"}