diff --git a/next-docs/pages/components/tagsInput.tsx b/next-docs/pages/components/tagsInput.tsx index 24ae2e1aaa..52b7915f9d 100644 --- a/next-docs/pages/components/tagsInput.tsx +++ b/next-docs/pages/components/tagsInput.tsx @@ -4,9 +4,9 @@ import type { ComponentNames } from '../../components/getComponent'; import Layout from '../../components/Layout'; import PropsTable from '../../components/PropsTable'; import Default from '../../public/examples/tagsInput/Default'; +import LowerCase from '../../public/examples/tagsInput/LowerCase'; import Sizes from '../../public/examples/tagsInput/Sizes'; import States from '../../public/examples/tagsInput/States'; -import TagsCases from '../../public/examples/tagsInput/TagsCases'; import useComponent from '../../utils/useComponent'; const COMPONENT_NAME: ComponentNames = 'TagsInput'; @@ -51,9 +51,9 @@ const PageTagsInput = () => { /> } - code={examples ? examples.TagsCases : 'Loading'} + title="Uppercase & lowercase" + preview={} + code={examples ? examples.LowerCase : 'Loading'} /> { default: '-', description: 'Tailwind classes for customization', }, - { - name: 'tagsCase', - type: 'normal | lower | capitalize', - required: false, - default: '-', - description: 'Sets the case of the tag`s text. By default, it is set to upper case.', - }, { name: 'onEnter', type: '(value: string) => void;', diff --git a/next-docs/public/examples/tagsInput/TagsCases.tsx b/next-docs/public/examples/tagsInput/LowerCase.tsx similarity index 66% rename from next-docs/public/examples/tagsInput/TagsCases.tsx rename to next-docs/public/examples/tagsInput/LowerCase.tsx index 9702653586..05741a7b89 100644 --- a/next-docs/public/examples/tagsInput/TagsCases.tsx +++ b/next-docs/public/examples/tagsInput/LowerCase.tsx @@ -2,14 +2,9 @@ import { TagsInput } from "@heathmont/moon-core-tw"; import { useCallback, useState } from "react"; const Example = () => { - const [selected0, setSelected0] = useState(['Preset data']); const [selected1, setSelected1] = useState(['Preset data']); const [selected2, setSelected2] = useState(['Preset data']); - const onEnter0 = useCallback((value: string) => { - setSelected0([...selected0, value]); - }, [selected0, setSelected0]); - const onEnter1 = useCallback((value: string) => { setSelected1([...selected1, value]); }, [selected1, setSelected1]); @@ -18,10 +13,6 @@ const Example = () => { setSelected2([...selected2, value]); }, [selected2, setSelected2]); - const onClear0 = useCallback((index: number) => { - setSelected0(selected0.filter((item, id) => id !== index)); - }, [selected0, setSelected0]); - const onClear1 = useCallback((index: number) => { setSelected1(selected1.filter((item, id) => id !== index)); }, [selected1, setSelected1]); @@ -33,30 +24,15 @@ const Example = () => { return (
-
- - {selected0.map((text, index) => ( - - ))} - -
-
{selected1.map((text, index) => ( - + ))}
@@ -65,7 +41,6 @@ const Example = () => { diff --git a/next-docs/public/examples/tagsInput/__tests__/index.test.tsx b/next-docs/public/examples/tagsInput/__tests__/index.test.tsx index 53c8b60f05..d4dff60e9a 100644 --- a/next-docs/public/examples/tagsInput/__tests__/index.test.tsx +++ b/next-docs/public/examples/tagsInput/__tests__/index.test.tsx @@ -6,7 +6,7 @@ import { cleanup, render } from '@testing-library/react'; import Default from '../Default'; import Sizes from '../Sizes'; import States from '../States'; -import TagsCases from '../TagsCases'; +import TagsCases from '../LowerCase'; const withRtl = (component: JSX.Element) =>
{component}
; diff --git a/workspaces/core/src/selectButton/SelectButton.tsx b/workspaces/core/src/selectButton/SelectButton.tsx index 8d1e355306..558c5e3302 100644 --- a/workspaces/core/src/selectButton/SelectButton.tsx +++ b/workspaces/core/src/selectButton/SelectButton.tsx @@ -22,6 +22,7 @@ const SelectButtonRoot = forwardRef( idDisabled, open, children, + isUppercase, ...rest }: SelectButtonProps, ref: Ref @@ -158,9 +159,9 @@ const Control = () => { ); }; -const Chip = ({ children, onClear }: ChipProps) => { +const Chip = ({ children, onClear, isUppercase, ...rest }: ChipProps) => { const { size } = useSelectButtonContext('SelectButton.Control'); - const cliclHandler = useCallback( + const clickHandler = useCallback( (e: any) => { e.preventDefault(); onClear && onClear(); @@ -171,8 +172,10 @@ const Chip = ({ children, onClear }: ChipProps) => { + } + isUppercase={isUppercase} + {...rest} > {children} diff --git a/workspaces/core/src/selectButton/private/types/ChipProps.ts b/workspaces/core/src/selectButton/private/types/ChipProps.ts index 04aa7a2e1f..8e38f3e844 100644 --- a/workspaces/core/src/selectButton/private/types/ChipProps.ts +++ b/workspaces/core/src/selectButton/private/types/ChipProps.ts @@ -1,3 +1,7 @@ -type ChipProps = { children: React.ReactNode; onClear?: () => void }; +type ChipProps = { + children: React.ReactNode; + onClear?: () => void; + isUppercase?: boolean +}; export default ChipProps; diff --git a/workspaces/core/src/selectButton/private/types/SelectButtonProps.ts b/workspaces/core/src/selectButton/private/types/SelectButtonProps.ts index be547ea414..5bb7b4a6fa 100644 --- a/workspaces/core/src/selectButton/private/types/SelectButtonProps.ts +++ b/workspaces/core/src/selectButton/private/types/SelectButtonProps.ts @@ -6,6 +6,7 @@ type SelectButtonProps = { label?: JSX.Element | string; placeholder?: JSX.Element | string; children?: React.ReactNode; + isUppercase?: boolean; }; export default SelectButtonProps; diff --git a/workspaces/core/src/selectButton/private/types/SelectButtonState.ts b/workspaces/core/src/selectButton/private/types/SelectButtonState.ts index fca75b4de7..f4d0156b1a 100644 --- a/workspaces/core/src/selectButton/private/types/SelectButtonState.ts +++ b/workspaces/core/src/selectButton/private/types/SelectButtonState.ts @@ -3,6 +3,7 @@ type SelectButtonState = { size?: 'sm' | 'md' | 'lg' | string; isError?: boolean; idDisabled?: boolean; + isUppercase?: boolean; }; export default SelectButtonState; diff --git a/workspaces/core/src/tagsInput/TagsInput.tsx b/workspaces/core/src/tagsInput/TagsInput.tsx index a2377c8afe..0d73d50539 100644 --- a/workspaces/core/src/tagsInput/TagsInput.tsx +++ b/workspaces/core/src/tagsInput/TagsInput.tsx @@ -1,12 +1,10 @@ import React, { forwardRef, useState } from "react"; -import { usePopper } from "react-popper"; -import { Input as NativeInput, SelectButton, mergeClassnames } from "../index"; -import { TagsInputContext, useTagsInputContext } from "./private/utils/useTagsInputContext"; -import { TagsInputRootProps } from "./private/types/TagsInputRootProps"; +import { Listbox } from "@headlessui/react"; import SelectedItemProps from "./private/types/SelectedItemProps"; +import { TagsInputRootProps } from "./private/types/TagsInputRootProps"; +import { TagsInputContext, useTagsInputContext } from "./private/utils/useTagsInputContext"; import getTextSizes from "./private/utils/useTextSizes"; -import getTextCase from "./private/utils/useTextCase"; -import { Listbox } from "@headlessui/react"; +import { Input as NativeInput, SelectButton, mergeClassnames } from "../index"; const TagsInputRoot = forwardRef(({ label, @@ -20,30 +18,18 @@ const TagsInputRoot = forwardRef(({ isError, onEnter, onClear, - tagsCase, - popper, + isUppercase, }, ref ) => { const [isFocused, setIsFocused] = useState(false); - const [anchorEl, setAnchorEl] = React.useState(); - const [popperEl, setPopperEl] = React.useState(); - - let { styles, attributes } = usePopper(anchorEl, popperEl); - const states = { + isUppercase, value: selected, size: size, disabled: disabled, isError: isError, onClear: onClear, - tagsCase: tagsCase, - popper: { - styles: styles, - attributes: attributes, - setAnchor: setAnchorEl, - setPopper: setPopperEl, - } } return ( @@ -96,7 +82,6 @@ const TagsInputRoot = forwardRef(({ }} onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)} - ref={states.popper?.setAnchor} /> @@ -108,15 +93,15 @@ const SelectedItem = ({ className, index, label, + isUppercase, ...rest }: SelectedItemProps) => { - const { size, disabled, isError, tagsCase, onClear } = useTagsInputContext('TagstInput.SelectedItem'); + const { size, disabled, isError, onClear } = useTagsInputContext('TagstInput.SelectedItem'); return ( div]:max-w-full', - getTextCase(tagsCase), + 'flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full', className )} > @@ -128,6 +113,7 @@ const SelectedItem = ({ > !disabled && onClear && onClear(index)} > void; onClear?: (index: number) => void; - tagsCase?: Case; - popper?: { - styles?: { [key: string]: React.CSSProperties }; - attributes?: { [key: string]: { [key: string]: string } | undefined }; - setAnchor: React.Dispatch>; - setPopper: React.Dispatch< - React.SetStateAction - >; - }; + isUppercase?: boolean; }; diff --git a/workspaces/core/src/tagsInput/private/types/TagsInputState.ts b/workspaces/core/src/tagsInput/private/types/TagsInputState.ts index 59c884873c..93990bf422 100644 --- a/workspaces/core/src/tagsInput/private/types/TagsInputState.ts +++ b/workspaces/core/src/tagsInput/private/types/TagsInputState.ts @@ -1,4 +1,3 @@ -import Case from "./Case"; import Size from "./Size"; type TagsInputState = { @@ -7,15 +6,6 @@ type TagsInputState = { disabled?: boolean; isError?: boolean; onClear?: (index: number) => void; - tagsCase?: Case; - popper?: { - styles?: { [key: string]: React.CSSProperties }; - attributes?: { [key: string]: { [key: string]: string } | undefined }; - setAnchor: React.Dispatch>; - setPopper: React.Dispatch< - React.SetStateAction - >; - }; }; export default TagsInputState;