@frontify/fondue 12.0.0-beta.40 → 12.0.0-beta.41
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.
- package/dist/components/Slider/Slider.es.js +3 -3
- package/dist/components/Slider/Slider.es.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/tailwind.config.js +8 -0
|
@@ -39,7 +39,7 @@ const u = (s) => s.icon !== void 0, G = (s) => {
|
|
|
39
39
|
onClick: p,
|
|
40
40
|
"data-test-id": w(),
|
|
41
41
|
className: f([
|
|
42
|
-
"tw-relative tw-w-full tw-
|
|
42
|
+
"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",
|
|
43
43
|
l && !o ? "tw-text-black" : "tw-text-black-80",
|
|
44
44
|
o ? "" : "hover:tw-text-black hover:tw-cursor-pointer"
|
|
45
45
|
])
|
|
@@ -55,7 +55,7 @@ const u = (s) => s.icon !== void 0, G = (s) => {
|
|
|
55
55
|
}, e.icon), e.value && /* @__PURE__ */ t.createElement("span", {
|
|
56
56
|
className: u(e) ? "tw-ml-2" : ""
|
|
57
57
|
}, e.value.toString()))));
|
|
58
|
-
},
|
|
58
|
+
}, z = ({
|
|
59
59
|
id: s,
|
|
60
60
|
items: i,
|
|
61
61
|
activeItemId: e,
|
|
@@ -89,6 +89,6 @@ const u = (s) => s.icon !== void 0, G = (s) => {
|
|
|
89
89
|
}), p);
|
|
90
90
|
};
|
|
91
91
|
export {
|
|
92
|
-
|
|
92
|
+
z as Slider
|
|
93
93
|
};
|
|
94
94
|
//# sourceMappingURL=Slider.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.es.js","sources":["../../../src/components/Slider/Slider.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 SliderProps = {\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 SliderItemProps {\n id: string;\n item: TextOrNumberItem | IconItem;\n disabled: boolean;\n radioGroupState: RadioGroupState;\n}\n\nconst SliderItem = (props: SliderItemProps) => {\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 getSliderItemTestId = () => {\n switch (true) {\n case isIconItem(item):\n return 'slider-item-icon';\n case typeof item.value === 'string':\n return 'slider-item-text';\n default:\n return 'slider-item-number';\n }\n };\n\n return (\n <li 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={getSliderItemTestId()}\n className={merge([\n 'tw-relative tw-w-full tw-
|
|
1
|
+
{"version":3,"file":"Slider.es.js","sources":["../../../src/components/Slider/Slider.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 SliderProps = {\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 SliderItemProps {\n id: string;\n item: TextOrNumberItem | IconItem;\n disabled: boolean;\n radioGroupState: RadioGroupState;\n}\n\nconst SliderItem = (props: SliderItemProps) => {\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 getSliderItemTestId = () => {\n switch (true) {\n case isIconItem(item):\n return 'slider-item-icon';\n case typeof item.value === 'string':\n return 'slider-item-text';\n default:\n return 'slider-item-number';\n }\n };\n\n return (\n <li 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={getSliderItemTestId()}\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=\"slider-input\" ref={ref} />\n </VisuallyHidden>\n <span className=\"tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex\">\n {isIconItem(item) && <span aria-label={item.ariaLabel}>{item.icon}</span>}\n {item.value && <span className={isIconItem(item) ? 'tw-ml-2' : ''}>{item.value.toString()}</span>}\n </span>\n </div>\n </li>\n );\n};\n\nexport const Slider: FC<SliderProps> = ({\n id: propId,\n items,\n activeItemId,\n onChange,\n ariaLabel = 'Slider',\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, i) => (\n <SliderItem\n id={id}\n item={item}\n disabled={disabled}\n radioGroupState={radioGroupState}\n key={`slider-${id}-item-${i}`}\n />\n ));\n }, [items, id, disabled, radioGroupState]);\n const selectedIndex = items.findIndex((item) => item.id === radioGroupState.selectedValue);\n\n return (\n <ul\n {...radioGroupProps}\n data-test-id=\"slider\"\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-list-none 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 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 </ul>\n );\n};\n"],"names":["isIconItem","item","SliderItem","props","id","disabled","radioGroupState","ref","useRef","isActive","inputProps","useRadio","isFocusVisible","focusProps","useFocusRing","handleMockLabelClick","_a","setInteractionModality","getSliderItemTestId","React","merge","FOCUS_STYLE","VisuallyHidden","Slider","propId","items","activeItemId","onChange","ariaLabel","useMemoizedId","groupProps","useRadioGroupState","radioGroupProps","useRadioGroup","itemElements","useMemo","i","selectedIndex","motion"],"mappings":"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"}
|