@pk-design/react-tailwind 1.8.1 → 1.10.0
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/cjs/components/Banner/Banner.js +1 -1
- package/dist/cjs/components/Banner/Banner.js.map +1 -1
- package/dist/cjs/components/BottomNavigation/BottomNavigation.js +14 -5
- package/dist/cjs/components/BottomNavigation/BottomNavigation.js.map +1 -1
- package/dist/cjs/components/Button/Button.js +88 -60
- package/dist/cjs/components/Button/Button.js.map +1 -1
- package/dist/cjs/components/Drawer/Drawer.js +6 -2
- package/dist/cjs/components/Drawer/Drawer.js.map +1 -1
- package/dist/cjs/components/MobileHeader/MobileHeader.js +21 -3
- package/dist/cjs/components/MobileHeader/MobileHeader.js.map +1 -1
- package/dist/cjs/components/PullToRefresh/PullToRefresh.js +145 -57
- package/dist/cjs/components/PullToRefresh/PullToRefresh.js.map +1 -1
- package/dist/cjs/components/SelectBox/SelectBox.js +25 -4
- package/dist/cjs/components/SelectBox/SelectBox.js.map +1 -1
- package/dist/cjs/components/StickyActionBar/StickyActionBar.js +2 -2
- package/dist/cjs/components/StickyActionBar/StickyActionBar.js.map +1 -1
- package/dist/cjs/components/Toast/Toast.js +1 -1
- package/dist/cjs/components/Toast/Toast.js.map +1 -1
- package/dist/cjs/hooks/use-breakpoint.js +48 -0
- package/dist/cjs/hooks/use-breakpoint.js.map +1 -0
- package/dist/cjs/index.js +5 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/components/Banner/Banner.js +1 -1
- package/dist/es/components/Banner/Banner.js.map +1 -1
- package/dist/es/components/BottomNavigation/BottomNavigation.js +14 -5
- package/dist/es/components/BottomNavigation/BottomNavigation.js.map +1 -1
- package/dist/es/components/Button/Button.js +89 -61
- package/dist/es/components/Button/Button.js.map +1 -1
- package/dist/es/components/Drawer/Drawer.js +6 -2
- package/dist/es/components/Drawer/Drawer.js.map +1 -1
- package/dist/es/components/MobileHeader/MobileHeader.js +21 -3
- package/dist/es/components/MobileHeader/MobileHeader.js.map +1 -1
- package/dist/es/components/PullToRefresh/PullToRefresh.js +146 -58
- package/dist/es/components/PullToRefresh/PullToRefresh.js.map +1 -1
- package/dist/es/components/SelectBox/SelectBox.js +26 -5
- package/dist/es/components/SelectBox/SelectBox.js.map +1 -1
- package/dist/es/components/StickyActionBar/StickyActionBar.js +2 -2
- package/dist/es/components/StickyActionBar/StickyActionBar.js.map +1 -1
- package/dist/es/components/Toast/Toast.js +1 -1
- package/dist/es/components/Toast/Toast.js.map +1 -1
- package/dist/es/hooks/use-breakpoint.js +43 -0
- package/dist/es/hooks/use-breakpoint.js.map +1 -0
- package/dist/es/index.js +1 -0
- package/dist/es/index.js.map +1 -1
- package/dist/react-tailwind.cjs.js +344 -135
- package/dist/react-tailwind.cjs.js.map +1 -1
- package/dist/react-tailwind.es.js +342 -137
- package/dist/react-tailwind.es.js.map +1 -1
- package/dist/types/components/BottomNavigation/BottomNavigation.d.ts +1 -1
- package/dist/types/components/BottomNavigation/BottomNavigation.types.d.ts +28 -3
- package/dist/types/components/Button/Button.types.d.ts +12 -6
- package/dist/types/components/Drawer/Drawer.types.d.ts +8 -4
- package/dist/types/components/MobileHeader/MobileHeader.d.ts +1 -1
- package/dist/types/components/MobileHeader/MobileHeader.types.d.ts +13 -0
- package/dist/types/components/PullToRefresh/PullToRefresh.d.ts +1 -1
- package/dist/types/components/PullToRefresh/PullToRefresh.types.d.ts +45 -6
- package/dist/types/components/SelectBox/SelectBox.types.d.ts +18 -1
- package/dist/types/components/StickyActionBar/StickyActionBar.types.d.ts +12 -0
- package/dist/types/hooks/use-breakpoint.d.ts +27 -0
- package/dist/types/hooks/use-breakpoint.test.d.ts +1 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/test-utils/mock-viewport.d.ts +7 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectBox.js","sources":["../../../../../src/components/SelectBox/SelectBox.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport {\n Combobox,\n ComboboxButton,\n ComboboxInput,\n ComboboxOption,\n ComboboxOptions,\n} from '@headlessui/react'\n\nimport { Label } from '../Label'\nimport { Badge } from '../Badge'\nimport { Loader } from '../Loader'\nimport { TextContent } from '../TextContent'\nimport { Button } from '../Button'\nimport { MobilePicker } from '../MobilePicker'\n\nimport { isArray } from '../../utils/is-array'\nimport { buildClassName } from '../../utils/build-classname'\nimport { isEmpty } from '../../utils/is-empty'\nimport { useDebounce } from '../../hooks/use-debounce'\n\nimport CheckIcon from '../Icons/Check.svg'\nimport ChevronDownIcon from '../Icons/ChevronDown.svg'\nimport XIcon from '../Icons/X.svg'\nimport CirclePlusIcon from '../Icons/CirclePlus.svg'\nimport type { BaseOption, SelectBoxProps, SelectBoxSize } from './SelectBox.types'\nimport { buildInputClass } from '../Input'\nimport { BodyText } from '../BodyText'\n\nconst NOOP = () => {}\nconst EMPTY_ARRAY: any[] = []\n\nconst sizeClasses: Record<\n SelectBoxSize,\n { input: string; group: string; icon: string; badgeSize: 'sm' | 'md' }\n> = {\n sm: {\n input: 'px-2.5 py-1.5 text-xs leading-5 min-h-[32px]',\n group: 'w-8 text-xs',\n icon: 'size-3.5',\n badgeSize: 'sm',\n },\n md: {\n input: 'px-3.5 py-2 text-sm leading-6 min-h-[38px]',\n group: 'w-10 text-sm',\n icon: 'size-4',\n badgeSize: 'md',\n },\n lg: {\n input: 'px-4 py-2.5 text-base leading-7 min-h-[46px]',\n group: 'w-12 text-base',\n icon: 'size-5',\n badgeSize: 'md',\n },\n}\n\nexport const SelectBox = forwardRef(\n <T extends BaseOption | string = BaseOption>(\n props: SelectBoxProps<T>,\n forwardedRef: React.Ref<HTMLInputElement | HTMLDivElement | null>,\n ) => {\n const {\n labelKey = 'label',\n valueKey = 'value',\n name,\n id = name,\n options = EMPTY_ARRAY,\n groups,\n selected,\n size = 'md',\n label = null,\n labelWrapperClass = '',\n labelClass = '',\n labelHint = null,\n disabled = false,\n containerClass = '',\n onChange = NOOP,\n placeholder,\n dropdownContainerClass = 'z-20',\n multiple = false,\n maxSelection,\n showSelectAll = false,\n immediate = true,\n showErrorMessage = true,\n error = null,\n helperText,\n leftGroup,\n renderOption,\n async = false,\n searchable = true,\n required = false,\n allowAdd = false,\n addNewText = 'Create',\n onAdd = NOOP,\n allowClear = false,\n allowFreeText = false,\n modalDropdown = false,\n noOptionsText = 'No options available',\n } = props\n\n if (props.asBottomSheet || props.mobileMode === 'sheet') {\n return <MobilePicker {...(props as any)} />\n }\n\n const hasError = Boolean(error)\n const [query, setQuery] = useState('')\n const debouncedQuery = useDebounce(query, 500)\n const [optionsLoading, setOptionsLoading] = useState(false)\n\n // Normalize options from options prop or groups prop\n const allOptions = useMemo(() => {\n if (groups?.length) {\n return groups.flatMap((g) => g.options)\n }\n return options\n }, [groups, options])\n\n const shouldShowTypeToSearch = async && !query && !optionsLoading && allOptions.length === 0\n const currentSize = sizeClasses[size] || sizeClasses.md\n\n const baseInputClass = useMemo(\n () => buildInputClass('', { disabled, hasError, size }),\n [disabled, hasError, size],\n )\n\n const chevronIconClass = useMemo(\n () =>\n buildClassName(\n currentSize.icon,\n 'stroke-gray-500 group-data-[hover]:stroke-gray-800',\n 'dark:stroke-gray-300 dark:group-data-[hover]:stroke-gray-100',\n disabled && 'dark:stroke-gray-600 stroke-gray-400',\n ),\n [currentSize.icon, disabled],\n )\n\n const inputRef = useRef<HTMLInputElement>(null)\n const containerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(forwardedRef, () => inputRef.current!, [inputRef])\n\n const filteredOptions = useMemo(() => {\n if (query === '' || async) return allOptions\n return allOptions.filter((opt) => {\n const lbl = typeof opt === 'string' ? opt : (opt as BaseOption)[labelKey]\n return lbl?.toLowerCase().includes(query.toLowerCase())\n })\n }, [allOptions, query, async, labelKey])\n\n const filteredGroups = useMemo(() => {\n if (!groups?.length) return null\n if (query === '' || async) return groups\n\n return groups\n .map((g) => ({\n ...g,\n options: g.options.filter((opt) => {\n const lbl = typeof opt === 'string' ? opt : (opt as BaseOption)[labelKey]\n return lbl?.toLowerCase().includes(query.toLowerCase())\n }),\n }))\n .filter((g) => g.options.length > 0)\n }, [groups, query, async, labelKey])\n\n const getDisplayValue = useCallback(\n (opt: T) => {\n return typeof opt === 'string' ? opt : opt[labelKey]\n },\n [labelKey],\n )\n\n const getValue = useCallback(\n (opt: T) => {\n return typeof opt === 'string' ? opt : opt[valueKey]\n },\n [valueKey],\n )\n\n const createFreeTextOption = useCallback(\n (text: string): T => {\n const sample = allOptions[0] || (Array.isArray(selected) ? selected[0] : selected)\n if (\n typeof sample === 'string' ||\n (!sample && typeof labelKey === 'string' && labelKey === 'label')\n ) {\n return text as unknown as T\n }\n return {\n [labelKey]: text,\n [valueKey]: text,\n } as unknown as T\n },\n [allOptions, selected, labelKey, valueKey],\n )\n\n const handleFreeTextCommit = useCallback(\n (queryText: string) => {\n const trimmed = queryText.trim()\n if (!trimmed) return\n\n const existing = allOptions.find((opt) => {\n const display = getDisplayValue(opt)\n return display?.toLowerCase() === trimmed.toLowerCase()\n })\n\n const valueToCommit = existing || createFreeTextOption(trimmed)\n\n if (multiple) {\n const current = isArray(selected) ? selected : []\n const alreadySelected = current.some(\n (item) => getDisplayValue(item)?.toLowerCase() === trimmed.toLowerCase(),\n )\n if (!alreadySelected) {\n if (maxSelection && current.length >= maxSelection) return\n onChange([...current, valueToCommit] as unknown as T[])\n }\n setQuery('')\n } else {\n onChange(valueToCommit)\n setQuery('')\n }\n },\n [\n allOptions,\n getDisplayValue,\n createFreeTextOption,\n multiple,\n selected,\n maxSelection,\n onChange,\n ],\n )\n\n const removeSelection = useCallback(\n (idx: number) => {\n if (!isArray(selected)) return\n const next = [...selected]\n next.splice(idx, 1)\n onChange(next)\n inputRef.current?.focus()\n },\n [selected, onChange],\n )\n\n const handleOnChangeInternal = useCallback(\n (value: T | T[] | null) => {\n if (value === null) {\n onChange(multiple ? ([] as T[]) : null)\n setQuery('')\n return\n }\n\n if (multiple && Array.isArray(value) && maxSelection && value.length > maxSelection) {\n return\n }\n\n onChange(value as T | T[])\n setQuery('')\n },\n [onChange, multiple, maxSelection],\n )\n\n const comboboxOnChangeWrapper = useCallback(\n (raw: unknown) => {\n if (raw === null || raw === undefined) {\n handleOnChangeInternal(null)\n return\n }\n\n if (Array.isArray(raw)) {\n const allNulls = raw.length > 0 && raw.every((v) => v === null)\n if (allNulls) {\n handleOnChangeInternal([] as unknown as T[])\n return\n }\n handleOnChangeInternal(raw as unknown as T[])\n return\n }\n\n handleOnChangeInternal(raw as unknown as T)\n },\n [handleOnChangeInternal],\n )\n\n const handleAddAndSelect = useCallback(\n async (valueToAdd: string) => {\n try {\n const result = await onAdd(valueToAdd)\n if (result) {\n handleOnChangeInternal(result as unknown as T)\n } else {\n handleOnChangeInternal(valueToAdd as unknown as T)\n }\n } catch (err) {\n console.error('onAdd handler error', err)\n }\n },\n [onAdd, handleOnChangeInternal],\n )\n\n const onSearchRef = useRef(props.onSearch)\n onSearchRef.current = props.onSearch\n\n const handleSearch = useCallback(async (searchString: string) => {\n try {\n setOptionsLoading(true)\n await onSearchRef.current?.(searchString)\n } catch (err) {\n console.error('Error loading options:', err)\n } finally {\n setOptionsLoading(false)\n }\n }, [])\n\n useEffect(() => {\n if (async && debouncedQuery) handleSearch(debouncedQuery)\n }, [debouncedQuery, async, handleSearch])\n\n const normalizedSelected = useMemo(() => {\n if (multiple) {\n if (Array.isArray(selected)) return selected\n if (selected !== null && selected !== undefined) return [selected as T]\n return [] as T[]\n } else {\n if (Array.isArray(selected)) return selected.length > 0 ? selected[0] : null\n return selected ?? null\n }\n }, [multiple, selected])\n\n const selectedValueSet = useMemo(() => {\n if (!normalizedSelected) return new Set<any>()\n if (Array.isArray(normalizedSelected)) {\n return new Set(normalizedSelected.map((s) => getValue(s)))\n }\n return new Set([getValue(normalizedSelected as T)])\n }, [normalizedSelected, getValue])\n\n const isAllSelected = useMemo(() => {\n if (!multiple || !Array.isArray(normalizedSelected) || !allOptions.length) return false\n return allOptions.length === normalizedSelected.length\n }, [multiple, normalizedSelected, allOptions])\n\n const handleToggleSelectAll = useCallback(() => {\n if (isAllSelected) {\n onChange([] as unknown as T[])\n } else {\n onChange(allOptions as unknown as T[])\n }\n }, [isAllSelected, onChange, allOptions])\n\n const hasLeftGroup = leftGroup != null && leftGroup !== undefined\n\n const hasFreeTextOption = Boolean(\n allowFreeText &&\n query.trim() &&\n !allOptions.some(\n (opt) => getDisplayValue(opt)?.toLowerCase() === query.trim().toLowerCase(),\n ),\n )\n\n const hasAddOption = Boolean(!allowFreeText && allowAdd && query.trim())\n const hasGroupOptions = Boolean(filteredGroups && filteredGroups.length > 0)\n const hasFlatOptions = filteredOptions.length > 0\n\n const hasAnyOptionsToDisplay =\n hasFlatOptions || hasGroupOptions || hasFreeTextOption || hasAddOption\n\n const renderOptionItem = (option: T) => {\n const optVal = getValue(option)\n const isOptSelected = selectedValueSet.has(optVal)\n\n return (\n <ComboboxOption\n key={optVal}\n disabled={(option as BaseOption).disabled}\n value={option}\n className=\"group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-gray-100 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none\"\n >\n {renderOption ? (\n renderOption(option, Boolean(isOptSelected))\n ) : (\n <div className=\"flex items-center justify-between gap-2 text-gray-900 dark:text-white group-data-[selected]:text-blue-600\">\n <span className=\"text-sm/6\">{getDisplayValue(option)}</span>\n <CheckIcon className=\"invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible\" />\n </div>\n )}\n </ComboboxOption>\n )\n }\n\n return (\n <div\n className={buildClassName('group space-y-2', hasError && 'has-error', containerClass)}\n ref={containerRef}\n >\n {label && (\n <div className={buildClassName('flex items-center justify-between', labelWrapperClass)}>\n <Label className={labelClass} htmlFor={id} aria-required={required}>\n {label}\n </Label>\n {labelHint && <TextContent xsmall>{labelHint}</TextContent>}\n </div>\n )}\n\n <Combobox\n multiple={multiple}\n immediate={immediate}\n name={name}\n value={normalizedSelected as any}\n onChange={comboboxOnChangeWrapper as any}\n onClose={() => setQuery('')}\n disabled={disabled}\n by={(a: any, b: any) => (a && b ? getValue(a) === getValue(b) : a === b)}\n >\n {multiple ? (\n <div\n className={buildClassName(\n baseInputClass,\n 'flex flex-wrap gap-2 peer relative',\n hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : '',\n )}\n ref={forwardedRef as any}\n >\n {hasLeftGroup && (\n <span\n className={buildClassName(\n 'absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500',\n currentSize.group,\n )}\n >\n {leftGroup}\n </span>\n )}\n\n {isArray(normalizedSelected) &&\n normalizedSelected?.length > 0 &&\n normalizedSelected.map((option, idx) => (\n <Badge\n key={`${getValue(option)}-${idx}`}\n theme=\"secondary\"\n size={currentSize.badgeSize}\n removable={!disabled}\n onRemove={() => removeSelection(idx)}\n >\n {getDisplayValue(option)}\n </Badge>\n ))}\n\n <ComboboxInput\n className=\"outline-none flex-1 dark:placeholder-gray-400 placeholder-gray-400 bg-transparent\"\n aria-label={name}\n value={query}\n autoComplete=\"off\"\n placeholder={normalizedSelected?.length ? '' : placeholder}\n onChange={(e) => {\n const val = e.target.value\n if (allowFreeText && multiple && val.includes(',')) {\n const parts = val.split(',')\n parts.forEach((p) => {\n if (p.trim()) handleFreeTextCommit(p.trim())\n })\n setQuery('')\n } else {\n setQuery(val)\n }\n }}\n id={id}\n ref={inputRef}\n onKeyDown={(e) => {\n if (allowFreeText && (e.key === 'Enter' || e.key === ',') && query.trim()) {\n e.preventDefault()\n handleFreeTextCommit(query.replace(/,/g, ''))\n } else if (multiple && e.key === 'Backspace' && !query) {\n if (Array.isArray(normalizedSelected) && normalizedSelected.length > 0) {\n removeSelection(normalizedSelected.length - 1)\n }\n }\n }}\n onBlur={() => {\n if (allowFreeText && query.trim()) {\n handleFreeTextCommit(query.replace(/,/g, ''))\n }\n }}\n data-testid=\"combobox-input\"\n />\n\n <ComboboxButton\n className=\"group absolute inset-y-0 right-0 px-2.5 flex items-center justify-center\"\n data-testid=\"combobox-button\"\n >\n <ChevronDownIcon className={chevronIconClass} />\n </ComboboxButton>\n </div>\n ) : (\n <div className=\"relative\" ref={forwardedRef as any}>\n {hasLeftGroup && (\n <span\n className={buildClassName(\n 'absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500 z-10',\n currentSize.group,\n )}\n >\n {leftGroup}\n </span>\n )}\n\n <ComboboxInput\n aria-label={name}\n displayValue={(option: any) => (option ? getDisplayValue(option) : null)}\n autoComplete=\"off\"\n placeholder={placeholder}\n onChange={(event) => setQuery(event.target.value)}\n onKeyDown={(e) => {\n if (allowFreeText && e.key === 'Enter' && query.trim()) {\n e.preventDefault()\n handleFreeTextCommit(query)\n }\n }}\n onBlur={() => {\n if (allowFreeText && query.trim()) {\n handleFreeTextCommit(query)\n }\n }}\n onFocus={() => {\n setQuery('')\n }}\n className={buildClassName(\n baseInputClass,\n hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : '',\n )}\n disabled={disabled}\n id={id}\n readOnly={!searchable}\n ref={inputRef}\n data-testid=\"combobox-input\"\n />\n\n {allowClear && !isEmpty(normalizedSelected) && (\n <Button\n size=\"xs\"\n iconOnly\n aria-label=\"Clear selection\"\n theme=\"secondary\"\n variant=\"plain\"\n className=\"group absolute inset-y-0 right-8 h-6 top-2\"\n onClick={() => handleOnChangeInternal(multiple ? ([] as T[]) : null)}\n disabled={disabled}\n data-testid=\"combobox-clear-button\"\n noOutlineOnFocus\n >\n <XIcon className=\"size-4 stroke-gray-500 dark:stroke-gray-300\" />\n </Button>\n )}\n\n <ComboboxButton\n className=\"group absolute inset-y-0 right-0 px-2.5 flex items-center justify-center\"\n data-testid=\"combobox-button\"\n >\n <ChevronDownIcon className={chevronIconClass} />\n </ComboboxButton>\n </div>\n )}\n\n <ComboboxOptions\n anchor={{ to: 'bottom', gap: 5 }}\n as=\"div\"\n modal={modalDropdown}\n className={buildClassName(\n 'w-[var(--input-width)] rounded-lg border border-[var(--ui-border)] bg-white dark:bg-gray-800 p-1 shadow-lg max-h-80 overflow-y-auto z-50 [--anchor-gap:var(--spacing-1)]',\n '[--anchor-max-height:20rem]',\n 'origin-top border transition duration-200 ease-[cubic-bezier(0.4, 0.0, 0.2, 1)] data-[closed]:translate-y-[-15%] data-[closed]:opacity-0',\n dropdownContainerClass,\n )}\n transition\n data-testid=\"combobox-options\"\n >\n {/* Multi-Select \"Select All\" Action Bar */}\n {multiple && showSelectAll && allOptions.length > 0 && (\n <div className=\"pb-1 mb-1 border-b border-[var(--ui-border-muted)] px-3 pt-1 flex items-center justify-between\">\n <button\n type=\"button\"\n onClick={handleToggleSelectAll}\n className=\"text-xs font-semibold text-blue-600 dark:text-blue-400 hover:underline cursor-pointer\"\n >\n {isAllSelected ? 'Deselect All' : 'Select All'}\n </button>\n <span className=\"text-[11px] font-medium text-gray-400\">\n {Array.isArray(normalizedSelected) ? normalizedSelected.length : 0} of{' '}\n {allOptions.length}\n </span>\n </div>\n )}\n\n {optionsLoading ? (\n <BodyText\n data-testid=\"options-loading\"\n className=\"flex items-center justify-center py-2 px-3 select-none\"\n >\n <Loader size=\"sm\" />\n </BodyText>\n ) : shouldShowTypeToSearch ? (\n <BodyText className=\"flex items-center justify-between py-2 px-3 select-none\">\n Type to search...\n </BodyText>\n ) : (\n <div>\n {/* Render Free-Text Option if query does not match an option exactly */}\n {allowFreeText &&\n query.trim() &&\n !allOptions.some(\n (opt) => getDisplayValue(opt)?.toLowerCase() === query.trim().toLowerCase(),\n ) && (\n <ComboboxOption\n key={`freetext-${query.trim()}`}\n value={createFreeTextOption(query.trim()) as any}\n className=\"group flex items-center gap-2 rounded-lg py-1.5 px-3 select-none text-sm data-[focus]:bg-blue-50 dark:data-[focus]:bg-blue-950/40 text-blue-600 dark:text-blue-400 font-medium cursor-pointer w-full\"\n data-testid=\"freetext-option\"\n >\n <span>Use \"{query.trim()}\"</span>\n </ComboboxOption>\n )}\n\n {/* Render Grouped Options */}\n {filteredGroups\n ? filteredGroups.map((grp, gIdx) => (\n <div key={gIdx}>\n <div className=\"text-[11px] font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 px-3 py-1 select-none\">\n {grp.group}\n </div>\n {grp.options.map(renderOptionItem)}\n </div>\n ))\n : /* Render Standard Flat Options */\n filteredOptions.map(renderOptionItem)}\n\n {!hasAnyOptionsToDisplay && Boolean(noOptionsText) && (\n <div\n data-testid=\"no-result-found\"\n className=\"flex items-center gap-2 py-1.5 px-3 select-none\"\n >\n <TextContent muted small>\n {noOptionsText}\n </TextContent>\n {Boolean(query.trim()) && (\n <TextContent strong small>\n \"{query.trim()}\"\n </TextContent>\n )}\n </div>\n )}\n\n {/* Creatable option (allowAdd) - suppressed when allowFreeText is true */}\n {!allowFreeText && allowAdd && Boolean(query.trim()) && (\n <ComboboxOption\n key={`add-${query.trim()}`}\n value={query}\n className=\"group rounded-lg py-1.5 px-3 cursor-pointer text-gray-700 dark:text-gray-300 data-[focus]:bg-gray-100 dark:data-[focus]:bg-gray-700\"\n onClick={() => void handleAddAndSelect(query)}\n >\n <div className=\"flex items-center gap-2\">\n <CirclePlusIcon className=\"size-4.5\" />\n <TextContent>\n {addNewText} \"{query}\"\n </TextContent>\n </div>\n </ComboboxOption>\n )}\n </div>\n )}\n </ComboboxOptions>\n </Combobox>\n\n {showErrorMessage && error && (\n <div className=\"mt-1\">\n <TextContent error small>\n {error}\n </TextContent>\n </div>\n )}\n\n {!error && helperText && (\n <div className=\"mt-1\">\n <TextContent muted small>\n {helperText}\n </TextContent>\n </div>\n )}\n </div>\n )\n },\n)\n\nSelectBox.displayName = 'SelectBox'\n"],"names":["forwardRef","_jsx","MobilePicker","useState","useDebounce","useMemo","buildInputClass","buildClassName","useRef","useImperativeHandle","useCallback","isArray","useEffect","ComboboxOption","_jsxs","CheckIcon","Label","TextContent","Combobox","Badge","ComboboxInput","ComboboxButton","ChevronDownIcon","isEmpty","Button","XIcon","ComboboxOptions","BodyText","Loader","CirclePlusIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelectBox.js","sources":["../../../../../src/components/SelectBox/SelectBox.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport {\n Combobox,\n ComboboxButton,\n ComboboxInput,\n ComboboxOption,\n ComboboxOptions,\n} from '@headlessui/react'\n\nimport { Label } from '../Label'\nimport { Badge } from '../Badge'\nimport { Loader } from '../Loader'\nimport { TextContent } from '../TextContent'\nimport { Button } from '../Button'\nimport { MobilePicker } from '../MobilePicker'\n\nimport { isArray } from '../../utils/is-array'\nimport { buildClassName } from '../../utils/build-classname'\nimport { isEmpty } from '../../utils/is-empty'\nimport { useDebounce } from '../../hooks/use-debounce'\n\nimport CheckIcon from '../Icons/Check.svg'\nimport ChevronDownIcon from '../Icons/ChevronDown.svg'\nimport XIcon from '../Icons/X.svg'\nimport CirclePlusIcon from '../Icons/CirclePlus.svg'\nimport type { BaseOption, SelectBoxProps, SelectBoxSize } from './SelectBox.types'\nimport { buildInputClass } from '../Input'\nimport { BodyText } from '../BodyText'\n\nconst NOOP = () => {}\nconst EMPTY_ARRAY: any[] = []\n\nconst sizeClasses: Record<\n SelectBoxSize,\n { input: string; group: string; icon: string; badgeSize: 'sm' | 'md' }\n> = {\n sm: {\n input: 'px-2.5 py-1.5 text-xs leading-5 min-h-[32px]',\n group: 'w-8 text-xs',\n icon: 'size-3.5',\n badgeSize: 'sm',\n },\n md: {\n input: 'px-3.5 py-2 text-sm leading-6 min-h-[38px]',\n group: 'w-10 text-sm',\n icon: 'size-4',\n badgeSize: 'md',\n },\n lg: {\n input: 'px-4 py-2.5 text-base leading-7 min-h-[46px]',\n group: 'w-12 text-base',\n icon: 'size-5',\n badgeSize: 'md',\n },\n}\n\nexport const SelectBox = forwardRef(\n <T extends BaseOption | string = BaseOption>(\n props: SelectBoxProps<T>,\n forwardedRef: React.Ref<HTMLInputElement | HTMLDivElement | null>,\n ) => {\n const {\n labelKey = 'label',\n valueKey = 'value',\n name,\n id = name,\n options = EMPTY_ARRAY,\n groups,\n selected: selectedProp,\n defaultSelected,\n size = 'md',\n label = null,\n labelWrapperClass = '',\n labelClass = '',\n labelHint = null,\n disabled = false,\n containerClass = '',\n onChange: onChangeProp = NOOP,\n placeholder,\n dropdownContainerClass = 'z-20',\n dropdownMinWidth,\n multiple = false,\n maxSelection,\n showSelectAll = false,\n immediate = true,\n showErrorMessage = true,\n error = null,\n helperText,\n leftGroup,\n renderOption,\n async = false,\n searchable = true,\n required = false,\n allowAdd = false,\n addNewText = 'Create',\n onAdd = NOOP,\n allowClear = false,\n allowFreeText = false,\n modalDropdown = false,\n noOptionsText = 'No options available',\n } = props\n\n // Uncontrolled when `selected` is not passed: keep the selection internally.\n const isControlled = selectedProp !== undefined\n const [internalSelected, setInternalSelected] = useState<T | T[] | null>(\n defaultSelected ?? null,\n )\n const selected = isControlled ? selectedProp : internalSelected\n\n const onChange = useCallback(\n (value: T | T[] | null) => {\n if (!isControlled) setInternalSelected(value)\n onChangeProp(value)\n },\n [isControlled, onChangeProp],\n )\n\n if (props.asBottomSheet || props.mobileMode === 'sheet') {\n return <MobilePicker {...(props as any)} selected={selected} onChange={onChange} />\n }\n\n const hasError = Boolean(error)\n const [query, setQuery] = useState('')\n const debouncedQuery = useDebounce(query, 500)\n const [optionsLoading, setOptionsLoading] = useState(false)\n\n // Normalize options from options prop or groups prop\n const allOptions = useMemo(() => {\n if (groups?.length) {\n return groups.flatMap((g) => g.options)\n }\n return options\n }, [groups, options])\n\n const shouldShowTypeToSearch = async && !query && !optionsLoading && allOptions.length === 0\n const currentSize = sizeClasses[size] || sizeClasses.md\n\n const baseInputClass = useMemo(\n () => buildInputClass('', { disabled, hasError, size }),\n [disabled, hasError, size],\n )\n\n const chevronIconClass = useMemo(\n () =>\n buildClassName(\n currentSize.icon,\n 'stroke-gray-500 group-data-[hover]:stroke-gray-800',\n 'dark:stroke-gray-300 dark:group-data-[hover]:stroke-gray-100',\n disabled && 'dark:stroke-gray-600 stroke-gray-400',\n ),\n [currentSize.icon, disabled],\n )\n\n const inputRef = useRef<HTMLInputElement>(null)\n const containerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(forwardedRef, () => inputRef.current!, [inputRef])\n\n const filteredOptions = useMemo(() => {\n if (query === '' || async) return allOptions\n return allOptions.filter((opt) => {\n const lbl = typeof opt === 'string' ? opt : (opt as BaseOption)[labelKey]\n return lbl?.toLowerCase().includes(query.toLowerCase())\n })\n }, [allOptions, query, async, labelKey])\n\n const filteredGroups = useMemo(() => {\n if (!groups?.length) return null\n if (query === '' || async) return groups\n\n return groups\n .map((g) => ({\n ...g,\n options: g.options.filter((opt) => {\n const lbl = typeof opt === 'string' ? opt : (opt as BaseOption)[labelKey]\n return lbl?.toLowerCase().includes(query.toLowerCase())\n }),\n }))\n .filter((g) => g.options.length > 0)\n }, [groups, query, async, labelKey])\n\n const getDisplayValue = useCallback(\n (opt: T) => {\n return typeof opt === 'string' ? opt : opt[labelKey]\n },\n [labelKey],\n )\n\n const getValue = useCallback(\n (opt: T) => {\n return typeof opt === 'string' ? opt : opt[valueKey]\n },\n [valueKey],\n )\n\n const createFreeTextOption = useCallback(\n (text: string): T => {\n const sample = allOptions[0] || (Array.isArray(selected) ? selected[0] : selected)\n if (\n typeof sample === 'string' ||\n (!sample && typeof labelKey === 'string' && labelKey === 'label')\n ) {\n return text as unknown as T\n }\n return {\n [labelKey]: text,\n [valueKey]: text,\n } as unknown as T\n },\n [allOptions, selected, labelKey, valueKey],\n )\n\n const handleFreeTextCommit = useCallback(\n (queryText: string) => {\n const trimmed = queryText.trim()\n if (!trimmed) return\n\n const existing = allOptions.find((opt) => {\n const display = getDisplayValue(opt)\n return display?.toLowerCase() === trimmed.toLowerCase()\n })\n\n const valueToCommit = existing || createFreeTextOption(trimmed)\n\n if (multiple) {\n const current = isArray(selected) ? selected : []\n const alreadySelected = current.some(\n (item) => getDisplayValue(item)?.toLowerCase() === trimmed.toLowerCase(),\n )\n if (!alreadySelected) {\n if (maxSelection && current.length >= maxSelection) return\n onChange([...current, valueToCommit] as unknown as T[])\n }\n setQuery('')\n } else {\n onChange(valueToCommit)\n setQuery('')\n }\n },\n [\n allOptions,\n getDisplayValue,\n createFreeTextOption,\n multiple,\n selected,\n maxSelection,\n onChange,\n ],\n )\n\n const removeSelection = useCallback(\n (idx: number) => {\n if (!isArray(selected)) return\n const next = [...selected]\n next.splice(idx, 1)\n onChange(next)\n inputRef.current?.focus()\n },\n [selected, onChange],\n )\n\n const handleOnChangeInternal = useCallback(\n (value: T | T[] | null) => {\n if (value === null) {\n onChange(multiple ? ([] as T[]) : null)\n setQuery('')\n return\n }\n\n if (multiple && Array.isArray(value) && maxSelection && value.length > maxSelection) {\n return\n }\n\n onChange(value as T | T[])\n setQuery('')\n },\n [onChange, multiple, maxSelection],\n )\n\n const comboboxOnChangeWrapper = useCallback(\n (raw: unknown) => {\n if (raw === null || raw === undefined) {\n handleOnChangeInternal(null)\n return\n }\n\n if (Array.isArray(raw)) {\n const allNulls = raw.length > 0 && raw.every((v) => v === null)\n if (allNulls) {\n handleOnChangeInternal([] as unknown as T[])\n return\n }\n handleOnChangeInternal(raw as unknown as T[])\n return\n }\n\n handleOnChangeInternal(raw as unknown as T)\n },\n [handleOnChangeInternal],\n )\n\n const handleAddAndSelect = useCallback(\n async (valueToAdd: string) => {\n try {\n const result = await onAdd(valueToAdd)\n if (result) {\n handleOnChangeInternal(result as unknown as T)\n } else {\n handleOnChangeInternal(valueToAdd as unknown as T)\n }\n } catch (err) {\n console.error('onAdd handler error', err)\n }\n },\n [onAdd, handleOnChangeInternal],\n )\n\n const onSearchRef = useRef(props.onSearch)\n onSearchRef.current = props.onSearch\n\n const handleSearch = useCallback(async (searchString: string) => {\n try {\n setOptionsLoading(true)\n await onSearchRef.current?.(searchString)\n } catch (err) {\n console.error('Error loading options:', err)\n } finally {\n setOptionsLoading(false)\n }\n }, [])\n\n useEffect(() => {\n if (async && debouncedQuery) handleSearch(debouncedQuery)\n }, [debouncedQuery, async, handleSearch])\n\n const normalizedSelected = useMemo(() => {\n if (multiple) {\n if (Array.isArray(selected)) return selected\n if (selected !== null && selected !== undefined) return [selected as T]\n return [] as T[]\n } else {\n if (Array.isArray(selected)) return selected.length > 0 ? selected[0] : null\n return selected ?? null\n }\n }, [multiple, selected])\n\n const selectedValueSet = useMemo(() => {\n if (!normalizedSelected) return new Set<any>()\n if (Array.isArray(normalizedSelected)) {\n return new Set(normalizedSelected.map((s) => getValue(s)))\n }\n return new Set([getValue(normalizedSelected as T)])\n }, [normalizedSelected, getValue])\n\n const isAllSelected = useMemo(() => {\n if (!multiple || !Array.isArray(normalizedSelected) || !allOptions.length) return false\n return allOptions.length === normalizedSelected.length\n }, [multiple, normalizedSelected, allOptions])\n\n const handleToggleSelectAll = useCallback(() => {\n if (isAllSelected) {\n onChange([] as unknown as T[])\n } else {\n onChange(allOptions as unknown as T[])\n }\n }, [isAllSelected, onChange, allOptions])\n\n const hasLeftGroup = leftGroup != null && leftGroup !== undefined\n\n // Reserve room for the chevron (and the clear button when shown) so long values\n // don't run underneath them.\n const showClearButton = allowClear && !multiple && !isEmpty(normalizedSelected)\n const rightPaddingClass = showClearButton\n ? 'pe-16'\n : size === 'lg'\n ? 'pe-11'\n : size === 'sm'\n ? 'pe-9'\n : 'pe-10'\n\n const hasFreeTextOption = Boolean(\n allowFreeText &&\n query.trim() &&\n !allOptions.some(\n (opt) => getDisplayValue(opt)?.toLowerCase() === query.trim().toLowerCase(),\n ),\n )\n\n const hasAddOption = Boolean(!allowFreeText && allowAdd && query.trim())\n const hasGroupOptions = Boolean(filteredGroups && filteredGroups.length > 0)\n const hasFlatOptions = filteredOptions.length > 0\n\n const hasAnyOptionsToDisplay =\n hasFlatOptions || hasGroupOptions || hasFreeTextOption || hasAddOption\n\n const renderOptionItem = (option: T) => {\n const optVal = getValue(option)\n const isOptSelected = selectedValueSet.has(optVal)\n\n return (\n <ComboboxOption\n key={optVal}\n disabled={(option as BaseOption).disabled}\n value={option}\n className=\"group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-gray-100 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none\"\n >\n {renderOption ? (\n renderOption(option, Boolean(isOptSelected))\n ) : (\n <div className=\"flex items-center justify-between gap-2 text-gray-900 dark:text-white group-data-[selected]:text-blue-600\">\n <span className=\"text-sm/6\">{getDisplayValue(option)}</span>\n <CheckIcon className=\"invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible\" />\n </div>\n )}\n </ComboboxOption>\n )\n }\n\n return (\n <div\n className={buildClassName('group space-y-2', hasError && 'has-error', containerClass)}\n ref={containerRef}\n >\n {label && (\n <div className={buildClassName('flex items-center justify-between', labelWrapperClass)}>\n <Label className={labelClass} htmlFor={id} aria-required={required}>\n {label}\n </Label>\n {labelHint && <TextContent xsmall>{labelHint}</TextContent>}\n </div>\n )}\n\n <Combobox\n multiple={multiple}\n immediate={immediate}\n name={name}\n value={normalizedSelected as any}\n onChange={comboboxOnChangeWrapper as any}\n onClose={() => setQuery('')}\n disabled={disabled}\n by={(a: any, b: any) => (a && b ? getValue(a) === getValue(b) : a === b)}\n >\n {multiple ? (\n <div\n className={buildClassName(\n baseInputClass,\n 'flex flex-wrap gap-2 peer relative',\n rightPaddingClass,\n hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : '',\n )}\n ref={forwardedRef as any}\n >\n {hasLeftGroup && (\n <span\n className={buildClassName(\n 'absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500',\n currentSize.group,\n )}\n >\n {leftGroup}\n </span>\n )}\n\n {isArray(normalizedSelected) &&\n normalizedSelected?.length > 0 &&\n normalizedSelected.map((option, idx) => (\n <Badge\n key={`${getValue(option)}-${idx}`}\n theme=\"secondary\"\n size={currentSize.badgeSize}\n removable={!disabled}\n onRemove={() => removeSelection(idx)}\n >\n {getDisplayValue(option)}\n </Badge>\n ))}\n\n <ComboboxInput\n className=\"outline-none flex-1 dark:placeholder-gray-400 placeholder-gray-400 bg-transparent\"\n aria-label={name}\n value={query}\n autoComplete=\"off\"\n placeholder={normalizedSelected?.length ? '' : placeholder}\n onChange={(e) => {\n const val = e.target.value\n if (allowFreeText && multiple && val.includes(',')) {\n const parts = val.split(',')\n parts.forEach((p) => {\n if (p.trim()) handleFreeTextCommit(p.trim())\n })\n setQuery('')\n } else {\n setQuery(val)\n }\n }}\n id={id}\n ref={inputRef}\n onKeyDown={(e) => {\n if (allowFreeText && (e.key === 'Enter' || e.key === ',') && query.trim()) {\n e.preventDefault()\n handleFreeTextCommit(query.replace(/,/g, ''))\n } else if (multiple && e.key === 'Backspace' && !query) {\n if (Array.isArray(normalizedSelected) && normalizedSelected.length > 0) {\n removeSelection(normalizedSelected.length - 1)\n }\n }\n }}\n onBlur={() => {\n if (allowFreeText && query.trim()) {\n handleFreeTextCommit(query.replace(/,/g, ''))\n }\n }}\n data-testid=\"combobox-input\"\n />\n\n <ComboboxButton\n className=\"group absolute inset-y-0 right-0 px-2.5 flex items-center justify-center\"\n data-testid=\"combobox-button\"\n >\n <ChevronDownIcon className={chevronIconClass} />\n </ComboboxButton>\n </div>\n ) : (\n <div className=\"relative\" ref={forwardedRef as any}>\n {hasLeftGroup && (\n <span\n className={buildClassName(\n 'absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500 z-10',\n currentSize.group,\n )}\n >\n {leftGroup}\n </span>\n )}\n\n <ComboboxInput\n aria-label={name}\n displayValue={(option: any) => (option ? getDisplayValue(option) : null)}\n autoComplete=\"off\"\n placeholder={placeholder}\n onChange={(event) => setQuery(event.target.value)}\n onKeyDown={(e) => {\n if (allowFreeText && e.key === 'Enter' && query.trim()) {\n e.preventDefault()\n handleFreeTextCommit(query)\n }\n }}\n onBlur={() => {\n if (allowFreeText && query.trim()) {\n handleFreeTextCommit(query)\n }\n }}\n onFocus={() => {\n setQuery('')\n }}\n className={buildClassName(\n baseInputClass,\n 'text-ellipsis',\n rightPaddingClass,\n hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : '',\n )}\n disabled={disabled}\n id={id}\n readOnly={!searchable}\n ref={inputRef}\n data-testid=\"combobox-input\"\n />\n\n {showClearButton && (\n <Button\n size=\"xs\"\n iconOnly\n aria-label=\"Clear selection\"\n theme=\"secondary\"\n variant=\"plain\"\n className=\"group absolute inset-y-0 right-8 h-6 top-2\"\n onClick={() => handleOnChangeInternal(multiple ? ([] as T[]) : null)}\n disabled={disabled}\n data-testid=\"combobox-clear-button\"\n >\n <XIcon className=\"size-4 stroke-gray-500 dark:stroke-gray-300\" />\n </Button>\n )}\n\n <ComboboxButton\n className=\"group absolute inset-y-0 right-0 px-2.5 flex items-center justify-center\"\n data-testid=\"combobox-button\"\n >\n <ChevronDownIcon className={chevronIconClass} />\n </ComboboxButton>\n </div>\n )}\n\n <ComboboxOptions\n anchor={{ to: 'bottom start', gap: 5, padding: 8 }}\n as=\"div\"\n modal={modalDropdown}\n // Matches the input width by default; min-width lets the panel grow wider than a narrow input.\n style={dropdownMinWidth != null ? { minWidth: dropdownMinWidth } : undefined}\n className={buildClassName(\n 'w-[var(--input-width)] rounded-lg border border-[var(--ui-border)] bg-white dark:bg-gray-800 p-1 shadow-lg max-h-80 overflow-y-auto z-50 [--anchor-gap:var(--spacing-1)]',\n '[--anchor-max-height:20rem]',\n 'origin-top border transition duration-200 ease-[cubic-bezier(0.4, 0.0, 0.2, 1)] data-[closed]:translate-y-[-15%] data-[closed]:opacity-0',\n dropdownContainerClass,\n )}\n transition\n data-testid=\"combobox-options\"\n >\n {/* Multi-Select \"Select All\" Action Bar */}\n {multiple && showSelectAll && allOptions.length > 0 && (\n <div className=\"pb-1 mb-1 border-b border-[var(--ui-border-muted)] px-3 pt-1 flex items-center justify-between\">\n <button\n type=\"button\"\n onClick={handleToggleSelectAll}\n className=\"text-xs font-semibold text-blue-600 dark:text-blue-400 hover:underline cursor-pointer\"\n >\n {isAllSelected ? 'Deselect All' : 'Select All'}\n </button>\n <span className=\"text-[11px] font-medium text-gray-400\">\n {Array.isArray(normalizedSelected) ? normalizedSelected.length : 0} of{' '}\n {allOptions.length}\n </span>\n </div>\n )}\n\n {optionsLoading ? (\n <BodyText\n data-testid=\"options-loading\"\n className=\"flex items-center justify-center py-2 px-3 select-none\"\n >\n <Loader size=\"sm\" />\n </BodyText>\n ) : shouldShowTypeToSearch ? (\n <BodyText className=\"flex items-center justify-between py-2 px-3 select-none\">\n Type to search...\n </BodyText>\n ) : (\n <div>\n {/* Render Free-Text Option if query does not match an option exactly */}\n {allowFreeText &&\n query.trim() &&\n !allOptions.some(\n (opt) => getDisplayValue(opt)?.toLowerCase() === query.trim().toLowerCase(),\n ) && (\n <ComboboxOption\n key={`freetext-${query.trim()}`}\n value={createFreeTextOption(query.trim()) as any}\n className=\"group flex items-center gap-2 rounded-lg py-1.5 px-3 select-none text-sm data-[focus]:bg-blue-50 dark:data-[focus]:bg-blue-950/40 text-blue-600 dark:text-blue-400 font-medium cursor-pointer w-full\"\n data-testid=\"freetext-option\"\n >\n <span>Use \"{query.trim()}\"</span>\n </ComboboxOption>\n )}\n\n {/* Render Grouped Options */}\n {filteredGroups\n ? filteredGroups.map((grp, gIdx) => (\n <div key={gIdx}>\n <div className=\"text-[11px] font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 px-3 py-1 select-none\">\n {grp.group}\n </div>\n {grp.options.map(renderOptionItem)}\n </div>\n ))\n : /* Render Standard Flat Options */\n filteredOptions.map(renderOptionItem)}\n\n {!hasAnyOptionsToDisplay && Boolean(noOptionsText) && (\n <div\n data-testid=\"no-result-found\"\n className=\"flex items-center gap-2 py-1.5 px-3 select-none\"\n >\n <TextContent muted small>\n {noOptionsText}\n </TextContent>\n {Boolean(query.trim()) && (\n <TextContent strong small>\n \"{query.trim()}\"\n </TextContent>\n )}\n </div>\n )}\n\n {/* Creatable option (allowAdd) - suppressed when allowFreeText is true */}\n {!allowFreeText && allowAdd && Boolean(query.trim()) && (\n <ComboboxOption\n key={`add-${query.trim()}`}\n value={query}\n className=\"group rounded-lg py-1.5 px-3 cursor-pointer text-gray-700 dark:text-gray-300 data-[focus]:bg-gray-100 dark:data-[focus]:bg-gray-700\"\n onClick={() => void handleAddAndSelect(query)}\n >\n <div className=\"flex items-center gap-2\">\n <CirclePlusIcon className=\"size-4.5\" />\n <TextContent>\n {addNewText} \"{query}\"\n </TextContent>\n </div>\n </ComboboxOption>\n )}\n </div>\n )}\n </ComboboxOptions>\n </Combobox>\n\n {showErrorMessage && error && (\n <div className=\"mt-1\">\n <TextContent error small>\n {error}\n </TextContent>\n </div>\n )}\n\n {!error && helperText && (\n <div className=\"mt-1\">\n <TextContent muted small>\n {helperText}\n </TextContent>\n </div>\n )}\n </div>\n )\n },\n)\n\nSelectBox.displayName = 'SelectBox'\n"],"names":["forwardRef","useState","useCallback","_jsx","MobilePicker","useDebounce","useMemo","buildInputClass","buildClassName","useRef","useImperativeHandle","isArray","useEffect","isEmpty","ComboboxOption","_jsxs","CheckIcon","Label","TextContent","Combobox","Badge","ComboboxInput","ComboboxButton","ChevronDownIcon","Button","XIcon","ComboboxOptions","BodyText","Loader","CirclePlusIcon"],"mappings":"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"}
|
|
@@ -7,14 +7,14 @@ var Drawer = require('../Drawer/Drawer.js');
|
|
|
7
7
|
|
|
8
8
|
const ChevronUpIcon = ({ className }) => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, "aria-hidden": "true", children: jsxRuntime.jsx("polyline", { points: "18 15 12 9 6 15" }) }));
|
|
9
9
|
const StickyActionBar = React.forwardRef((props, ref) => {
|
|
10
|
-
const { summaryContent, actionsContent, drawerContent, drawerTitle = 'Summary Details', position = 'fixed', containerMaxWidth = 'max-w-5xl', className, ...restProps } = props;
|
|
10
|
+
const { summaryContent, actionsContent, drawerContent, drawerTitle = 'Summary Details', position = 'fixed', containerMaxWidth = 'max-w-5xl', safeArea = true, bottomOffset, className, style, ...restProps } = props;
|
|
11
11
|
const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
|
|
12
12
|
const positionClass = position === 'fixed'
|
|
13
13
|
? 'fixed bottom-0 left-0 right-0 z-30'
|
|
14
14
|
: position === 'sticky'
|
|
15
15
|
? 'sticky bottom-0 z-30'
|
|
16
16
|
: 'relative z-10';
|
|
17
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ref: ref, className: buildClassname.buildClassName(positionClass, 'border-t border-[var(--ui-border)] bg-white/90 p-3.5 backdrop-blur-md shadow-lg dark:bg-gray-900/90 transition-all', className), "data-testid": "sticky-action-bar", ...restProps, children: jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('mx-auto flex items-center justify-between gap-3', containerMaxWidth), children: [summaryContent && (jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: drawerContent ? (jsxRuntime.jsxs("button", { type: "button", onClick: () => setIsDrawerOpen(true), className: "flex items-center gap-2 text-left transition-opacity hover:opacity-80 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)] rounded-lg p-1 -m-1", "aria-label": "Expand summary details", "data-testid": "summary-trigger", children: [jsxRuntime.jsx("div", { children: summaryContent }), jsxRuntime.jsx(ChevronUpIcon, { className: "size-4 text-[var(--ui-primary)] dark:text-blue-400 shrink-0" })] })) : (jsxRuntime.jsx("div", { children: summaryContent })) })), actionsContent && (jsxRuntime.jsx("div", { className: "flex items-center gap-2 shrink-0 ml-auto", "data-testid": "actions-stack", children: actionsContent }))] }) }), drawerContent && (jsxRuntime.jsx(Drawer.Drawer, { isOpen: isDrawerOpen, onClose: () => setIsDrawerOpen(false), align: "bottom", size: "full", title: drawerTitle, showBackButton: true, contentClass: "px-4 pb-6 max-h-[calc(100svh-6rem)] overflow-y-auto", children: drawerContent }))] }));
|
|
17
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ref: ref, className: buildClassname.buildClassName(positionClass, 'border-t border-[var(--ui-border)] bg-white/90 p-3.5 backdrop-blur-md shadow-lg dark:bg-gray-900/90 transition-all', safeArea && 'pb-[calc(0.875rem+env(safe-area-inset-bottom,0px))]', className), style: bottomOffset && position !== 'relative' ? { bottom: bottomOffset, ...style } : style, "data-testid": "sticky-action-bar", ...restProps, children: jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('mx-auto flex items-center justify-between gap-3', containerMaxWidth), children: [summaryContent && (jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: drawerContent ? (jsxRuntime.jsxs("button", { type: "button", onClick: () => setIsDrawerOpen(true), className: "flex items-center gap-2 text-left transition-opacity hover:opacity-80 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)] rounded-lg p-1 -m-1", "aria-label": "Expand summary details", "data-testid": "summary-trigger", children: [jsxRuntime.jsx("div", { children: summaryContent }), jsxRuntime.jsx(ChevronUpIcon, { className: "size-4 text-[var(--ui-primary)] dark:text-blue-400 shrink-0" })] })) : (jsxRuntime.jsx("div", { children: summaryContent })) })), actionsContent && (jsxRuntime.jsx("div", { className: "flex items-center gap-2 shrink-0 ml-auto", "data-testid": "actions-stack", children: actionsContent }))] }) }), drawerContent && (jsxRuntime.jsx(Drawer.Drawer, { isOpen: isDrawerOpen, onClose: () => setIsDrawerOpen(false), align: "bottom", size: "full", title: drawerTitle, showBackButton: true, contentClass: "px-4 pb-6 max-h-[calc(100svh-6rem)] overflow-y-auto", children: drawerContent }))] }));
|
|
18
18
|
});
|
|
19
19
|
StickyActionBar.displayName = 'StickyActionBar';
|
|
20
20
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StickyActionBar.js","sources":["../../../../../src/components/StickyActionBar/StickyActionBar.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Drawer } from '../Drawer'\nimport type { StickyActionBarProps } from './StickyActionBar.types'\n\nconst ChevronUpIcon = ({ className }: { className?: string }) => (\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={className}\n aria-hidden=\"true\"\n >\n <polyline points=\"18 15 12 9 6 15\" />\n </svg>\n)\n\nexport const StickyActionBar = forwardRef<HTMLDivElement, StickyActionBarProps>((props, ref) => {\n const {\n summaryContent,\n actionsContent,\n drawerContent,\n drawerTitle = 'Summary Details',\n position = 'fixed',\n containerMaxWidth = 'max-w-5xl',\n className,\n ...restProps\n } = props\n\n const [isDrawerOpen, setIsDrawerOpen] = useState(false)\n\n const positionClass =\n position === 'fixed'\n ? 'fixed bottom-0 left-0 right-0 z-30'\n : position === 'sticky'\n ? 'sticky bottom-0 z-30'\n : 'relative z-10'\n\n return (\n <>\n <div\n ref={ref}\n className={buildClassName(\n positionClass,\n 'border-t border-[var(--ui-border)] bg-white/90 p-3.5 backdrop-blur-md shadow-lg dark:bg-gray-900/90 transition-all',\n className,\n )}\n data-testid=\"sticky-action-bar\"\n {...restProps}\n >\n <div\n className={buildClassName(\n 'mx-auto flex items-center justify-between gap-3',\n containerMaxWidth,\n )}\n >\n {/* Summary Content Slot */}\n {summaryContent && (\n <div className=\"flex items-center gap-2\">\n {drawerContent ? (\n <button\n type=\"button\"\n onClick={() => setIsDrawerOpen(true)}\n className=\"flex items-center gap-2 text-left transition-opacity hover:opacity-80 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)] rounded-lg p-1 -m-1\"\n aria-label=\"Expand summary details\"\n data-testid=\"summary-trigger\"\n >\n <div>{summaryContent}</div>\n <ChevronUpIcon className=\"size-4 text-[var(--ui-primary)] dark:text-blue-400 shrink-0\" />\n </button>\n ) : (\n <div>{summaryContent}</div>\n )}\n </div>\n )}\n\n {/* Actions Stack Slot */}\n {actionsContent && (\n <div className=\"flex items-center gap-2 shrink-0 ml-auto\" data-testid=\"actions-stack\">\n {actionsContent}\n </div>\n )}\n </div>\n </div>\n\n {/* Optional Expandable Details Drawer */}\n {drawerContent && (\n <Drawer\n isOpen={isDrawerOpen}\n onClose={() => setIsDrawerOpen(false)}\n align=\"bottom\"\n size=\"full\"\n title={drawerTitle}\n showBackButton\n contentClass=\"px-4 pb-6 max-h-[calc(100svh-6rem)] overflow-y-auto\"\n >\n {drawerContent}\n </Drawer>\n )}\n </>\n )\n})\n\nStickyActionBar.displayName = 'StickyActionBar'\n"],"names":["_jsx","forwardRef","useState","_jsxs","_Fragment","buildClassName","Drawer"],"mappings":";;;;;;;AAKA,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAA0B,MAC1DA,cAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,SAAS,EAAE,SAAS,EAAA,aAAA,EACR,MAAM,YAElBA,cAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,iBAAiB,EAAA,CAAG,EAAA,CACjC,CACP;AAEM,MAAM,eAAe,GAAGC,gBAAU,CAAuC,CAAC,KAAK,EAAE,GAAG,KAAI;
|
|
1
|
+
{"version":3,"file":"StickyActionBar.js","sources":["../../../../../src/components/StickyActionBar/StickyActionBar.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Drawer } from '../Drawer'\nimport type { StickyActionBarProps } from './StickyActionBar.types'\n\nconst ChevronUpIcon = ({ className }: { className?: string }) => (\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={className}\n aria-hidden=\"true\"\n >\n <polyline points=\"18 15 12 9 6 15\" />\n </svg>\n)\n\nexport const StickyActionBar = forwardRef<HTMLDivElement, StickyActionBarProps>((props, ref) => {\n const {\n summaryContent,\n actionsContent,\n drawerContent,\n drawerTitle = 'Summary Details',\n position = 'fixed',\n containerMaxWidth = 'max-w-5xl',\n safeArea = true,\n bottomOffset,\n className,\n style,\n ...restProps\n } = props\n\n const [isDrawerOpen, setIsDrawerOpen] = useState(false)\n\n const positionClass =\n position === 'fixed'\n ? 'fixed bottom-0 left-0 right-0 z-30'\n : position === 'sticky'\n ? 'sticky bottom-0 z-30'\n : 'relative z-10'\n\n return (\n <>\n <div\n ref={ref}\n className={buildClassName(\n positionClass,\n 'border-t border-[var(--ui-border)] bg-white/90 p-3.5 backdrop-blur-md shadow-lg dark:bg-gray-900/90 transition-all',\n safeArea && 'pb-[calc(0.875rem+env(safe-area-inset-bottom,0px))]',\n className,\n )}\n style={bottomOffset && position !== 'relative' ? { bottom: bottomOffset, ...style } : style}\n data-testid=\"sticky-action-bar\"\n {...restProps}\n >\n <div\n className={buildClassName(\n 'mx-auto flex items-center justify-between gap-3',\n containerMaxWidth,\n )}\n >\n {/* Summary Content Slot */}\n {summaryContent && (\n <div className=\"flex items-center gap-2\">\n {drawerContent ? (\n <button\n type=\"button\"\n onClick={() => setIsDrawerOpen(true)}\n className=\"flex items-center gap-2 text-left transition-opacity hover:opacity-80 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)] rounded-lg p-1 -m-1\"\n aria-label=\"Expand summary details\"\n data-testid=\"summary-trigger\"\n >\n <div>{summaryContent}</div>\n <ChevronUpIcon className=\"size-4 text-[var(--ui-primary)] dark:text-blue-400 shrink-0\" />\n </button>\n ) : (\n <div>{summaryContent}</div>\n )}\n </div>\n )}\n\n {/* Actions Stack Slot */}\n {actionsContent && (\n <div className=\"flex items-center gap-2 shrink-0 ml-auto\" data-testid=\"actions-stack\">\n {actionsContent}\n </div>\n )}\n </div>\n </div>\n\n {/* Optional Expandable Details Drawer */}\n {drawerContent && (\n <Drawer\n isOpen={isDrawerOpen}\n onClose={() => setIsDrawerOpen(false)}\n align=\"bottom\"\n size=\"full\"\n title={drawerTitle}\n showBackButton\n contentClass=\"px-4 pb-6 max-h-[calc(100svh-6rem)] overflow-y-auto\"\n >\n {drawerContent}\n </Drawer>\n )}\n </>\n )\n})\n\nStickyActionBar.displayName = 'StickyActionBar'\n"],"names":["_jsx","forwardRef","useState","_jsxs","_Fragment","buildClassName","Drawer"],"mappings":";;;;;;;AAKA,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAA0B,MAC1DA,cAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,SAAS,EAAE,SAAS,EAAA,aAAA,EACR,MAAM,YAElBA,cAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,iBAAiB,EAAA,CAAG,EAAA,CACjC,CACP;AAEM,MAAM,eAAe,GAAGC,gBAAU,CAAuC,CAAC,KAAK,EAAE,GAAG,KAAI;AAC7F,IAAA,MAAM,EACJ,cAAc,EACd,cAAc,EACd,aAAa,EACb,WAAW,GAAG,iBAAiB,EAC/B,QAAQ,GAAG,OAAO,EAClB,iBAAiB,GAAG,WAAW,EAC/B,QAAQ,GAAG,IAAI,EACf,YAAY,EACZ,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,GAAG,KAAK;IAET,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AAEvD,IAAA,MAAM,aAAa,GACjB,QAAQ,KAAK;AACX,UAAE;UACA,QAAQ,KAAK;AACb,cAAE;cACA,eAAe;AAEvB,IAAA,QACEC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACEJ,cAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEK,6BAAc,CACvB,aAAa,EACb,oHAAoH,EACpH,QAAQ,IAAI,qDAAqD,EACjE,SAAS,CACV,EACD,KAAK,EAAE,YAAY,IAAI,QAAQ,KAAK,UAAU,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,EAAA,aAAA,EAC/E,mBAAmB,EAAA,GAC3B,SAAS,YAEbF,eAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEE,6BAAc,CACvB,iDAAiD,EACjD,iBAAiB,CAClB,EAAA,QAAA,EAAA,CAGA,cAAc,KACbL,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EACrC,aAAa,IACZG,eAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,eAAe,CAAC,IAAI,CAAC,EACpC,SAAS,EAAC,8LAA8L,EAAA,YAAA,EAC7L,wBAAwB,EAAA,aAAA,EACvB,iBAAiB,aAE7BH,cAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAM,cAAc,GAAO,EAC3BA,cAAA,CAAC,aAAa,EAAA,EAAC,SAAS,EAAC,6DAA6D,GAAG,CAAA,EAAA,CAClF,KAETA,cAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAM,cAAc,EAAA,CAAO,CAC5B,GACG,CACP,EAGA,cAAc,KACbA,wBAAK,SAAS,EAAC,0CAA0C,EAAA,aAAA,EAAa,eAAe,YAClF,cAAc,EAAA,CACX,CACP,CAAA,EAAA,CACG,EAAA,CACF,EAGL,aAAa,KACZA,cAAA,CAACM,aAAM,EAAA,EACL,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,MAAM,eAAe,CAAC,KAAK,CAAC,EACrC,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,cAAc,QACd,YAAY,EAAC,qDAAqD,EAAA,QAAA,EAEjE,aAAa,GACP,CACV,CAAA,EAAA,CACA;AAEP,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -88,7 +88,7 @@ const Toast = ({ id, title, message, type, variant = 'accent', action, icon, sho
|
|
|
88
88
|
const renderedIcon = icon !== null && icon !== void 0 ? icon : (variant === 'filled' ? filledIconMap[type] : iconMap[type]);
|
|
89
89
|
return (jsxRuntime.jsx(react.Transition, { appear: true, show: true, enter: "transform transition duration-300 ease-out", enterFrom: enterFrom, enterTo: "opacity-100 translate-y-0 scale-100", leave: "transition duration-200 ease-in", leaveFrom: "opacity-100 translate-y-0 scale-100", leaveTo: leaveTo, children: jsxRuntime.jsxs("div", { role: "status", id: id.toString(), className: buildClassname.buildClassName('relative overflow-hidden flex items-start gap-3 rounded-xl px-4 py-3.5 min-w-[280px] max-w-md transition-all', variantStyleMap[variant][type], className), children: [jsxRuntime.jsx("div", { className: "shrink-0 mt-0.5", children: variant === 'filled' ? (renderedIcon) : (jsxRuntime.jsx(TextContent.TextContent, { className: buildClassname.buildClassName(textColorMap[type]), children: renderedIcon })) }), jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [title && (jsxRuntime.jsx("div", { className: buildClassname.buildClassName('font-semibold text-sm leading-snug', variant === 'filled' ? 'text-white' : 'text-gray-900 dark:text-gray-100'), children: title })), jsxRuntime.jsx("div", { className: buildClassname.buildClassName('text-sm font-medium leading-relaxed', variant === 'filled' ? 'text-white/95' : 'text-gray-700 dark:text-gray-300'), children: message }), action && (jsxRuntime.jsx("div", { className: "mt-1.5", children: jsxRuntime.jsx("button", { type: "button", onClick: action.onClick, className: buildClassname.buildClassName('text-xs font-semibold underline underline-offset-2 transition-opacity focus:outline-none', variant === 'filled'
|
|
90
90
|
? 'text-white hover:opacity-85'
|
|
91
|
-
: 'text-[var(--ui-primary)] hover:opacity-80'), children: action.label }) }))] }), jsxRuntime.jsx(Button.Button, { onClick: onClose, "aria-label": "Close toast", className: buildClassname.buildClassName('shrink-0 mt-0.5 opacity-60 hover:opacity-100 transition', variant === 'filled' && 'text-white hover:text-white'), iconOnly: true, size: "xs", variant: "plain", theme: variant === 'filled' ? 'primary' : 'secondary',
|
|
91
|
+
: 'text-[var(--ui-primary)] hover:opacity-80'), children: action.label }) }))] }), jsxRuntime.jsx(Button.Button, { onClick: onClose, "aria-label": "Close toast", className: buildClassname.buildClassName('shrink-0 mt-0.5 opacity-60 hover:opacity-100 focus-visible:opacity-100 transition', variant === 'filled' && 'text-white hover:text-white focus-visible:outline-current'), iconOnly: true, size: "xs", variant: "plain", theme: variant === 'filled' ? 'primary' : 'secondary', children: jsxRuntime.jsx(X.default, { className: "size-4" }) }), showProgressBar && duration > 0 && (jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 h-1 bg-black/10 dark:bg-white/10 overflow-hidden", children: jsxRuntime.jsx("div", { className: buildClassname.buildClassName('h-full transition-all duration-75 ease-linear', variant === 'filled' ? 'bg-white/70' : progressBarColorMap[type]), style: { width: `${Math.max(0, progress)}%` } }) }))] }) }));
|
|
92
92
|
};
|
|
93
93
|
Toast.displayName = 'Toast';
|
|
94
94
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sources":["../../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { Transition } from '@headlessui/react'\nimport XIcon from '../Icons/X.svg'\nimport CheckCircle from '../Icons/CircleCheck.svg'\nimport AlertCircle from '../Icons/CircleAlert.svg'\nimport Info from '../Icons/Info.svg'\nimport AlertTriangle from '../Icons/TriangleAlert.svg'\n\nimport { Button } from '../Button'\nimport { TextContent } from '../TextContent'\nimport { buildClassName } from '../../utils/build-classname'\n\nimport type { ToastProps, ToastType, ToastVariant } from './Toast.types'\n\n/**\n * Icons for each toast type\n */\nconst iconMap: Record<ToastType, React.ReactNode> = {\n success: <CheckCircle className=\"size-5 text-[var(--ui-success)]\" />,\n error: <AlertCircle className=\"size-5 text-[var(--ui-danger)]\" />,\n info: <Info className=\"size-5 text-[var(--ui-info)]\" />,\n warning: <AlertTriangle className=\"size-5 text-[var(--ui-warning)]\" />,\n}\n\nconst filledIconMap: Record<ToastType, React.ReactNode> = {\n success: <CheckCircle className=\"size-5 text-white\" />,\n error: <AlertCircle className=\"size-5 text-white\" />,\n info: <Info className=\"size-5 text-white\" />,\n warning: <AlertTriangle className=\"size-5 text-white\" />,\n}\n\nconst textColorMap: Record<ToastType, string> = {\n success: 'text-[var(--ui-success-text)]',\n error: 'text-[var(--ui-danger-text)]',\n info: 'text-[var(--ui-info-text)]',\n warning: 'text-[var(--ui-warning-text)]',\n}\n\nconst progressBarColorMap: Record<ToastType, string> = {\n success: 'bg-[var(--ui-success)]',\n error: 'bg-[var(--ui-danger)]',\n info: 'bg-[var(--ui-info)]',\n warning: 'bg-[var(--ui-warning)]',\n}\n\nconst variantStyleMap: Record<ToastVariant, Record<ToastType, string>> = {\n accent: {\n success:\n 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-success)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n error:\n 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-danger)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n info: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-info)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n warning:\n 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-warning)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n },\n filled: {\n success: 'bg-[var(--ui-success)] text-white shadow-lg',\n error: 'bg-[var(--ui-danger)] text-white shadow-lg',\n info: 'bg-[var(--ui-info)] text-white shadow-lg',\n warning: 'bg-[var(--ui-warning)] text-white shadow-lg',\n },\n outlined: {\n success:\n 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-success)] text-gray-900 dark:text-gray-100 shadow-md',\n error:\n 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-danger)] text-gray-900 dark:text-gray-100 shadow-md',\n info: 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-info)] text-gray-900 dark:text-gray-100 shadow-md',\n warning:\n 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-warning)] text-gray-900 dark:text-gray-100 shadow-md',\n },\n glass: {\n success:\n 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-emerald-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n error:\n 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-rose-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n info: 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-blue-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n warning:\n 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-amber-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n },\n}\n\nexport const Toast: React.FC<ToastProps & { isTop?: boolean }> = ({\n id,\n title,\n message,\n type,\n variant = 'accent',\n action,\n icon,\n showProgressBar = true,\n duration = 4000,\n isPaused = false,\n onClose,\n className,\n isTop = true,\n}) => {\n const [progress, setProgress] = useState(100)\n\n useEffect(() => {\n if (!showProgressBar || !duration || isPaused) return\n\n const intervalTime = 50\n const step = (intervalTime / duration) * 100\n\n const timer = setInterval(() => {\n setProgress((prev) => {\n if (prev <= 0) {\n clearInterval(timer)\n return 0\n }\n return prev - step\n })\n }, intervalTime)\n\n return () => clearInterval(timer)\n }, [showProgressBar, duration, isPaused])\n\n const enterFrom = isTop ? 'opacity-0 -translate-y-3 scale-95' : 'opacity-0 translate-y-3 scale-95'\n const leaveTo = isTop ? 'opacity-0 -translate-y-2 scale-95' : 'opacity-0 translate-y-2 scale-95'\n\n const renderedIcon = icon ?? (variant === 'filled' ? filledIconMap[type] : iconMap[type])\n\n return (\n <Transition\n appear\n show\n enter=\"transform transition duration-300 ease-out\"\n enterFrom={enterFrom}\n enterTo=\"opacity-100 translate-y-0 scale-100\"\n leave=\"transition duration-200 ease-in\"\n leaveFrom=\"opacity-100 translate-y-0 scale-100\"\n leaveTo={leaveTo}\n >\n <div\n role=\"status\"\n id={id.toString()}\n className={buildClassName(\n 'relative overflow-hidden flex items-start gap-3 rounded-xl px-4 py-3.5 min-w-[280px] max-w-md transition-all',\n variantStyleMap[variant][type],\n className,\n )}\n >\n {/* Icon */}\n <div className=\"shrink-0 mt-0.5\">\n {variant === 'filled' ? (\n renderedIcon\n ) : (\n <TextContent className={buildClassName(textColorMap[type])}>{renderedIcon}</TextContent>\n )}\n </div>\n\n {/* Content Body */}\n <div className=\"flex-1 flex flex-col gap-0.5\">\n {title && (\n <div\n className={buildClassName(\n 'font-semibold text-sm leading-snug',\n variant === 'filled' ? 'text-white' : 'text-gray-900 dark:text-gray-100',\n )}\n >\n {title}\n </div>\n )}\n <div\n className={buildClassName(\n 'text-sm font-medium leading-relaxed',\n variant === 'filled' ? 'text-white/95' : 'text-gray-700 dark:text-gray-300',\n )}\n >\n {message}\n </div>\n\n {/* Action Button */}\n {action && (\n <div className=\"mt-1.5\">\n <button\n type=\"button\"\n onClick={action.onClick}\n className={buildClassName(\n 'text-xs font-semibold underline underline-offset-2 transition-opacity focus:outline-none',\n variant === 'filled'\n ? 'text-white hover:opacity-85'\n : 'text-[var(--ui-primary)] hover:opacity-80',\n )}\n >\n {action.label}\n </button>\n </div>\n )}\n </div>\n\n {/* Close button */}\n <Button\n onClick={onClose}\n aria-label=\"Close toast\"\n className={buildClassName(\n 'shrink-0 mt-0.5 opacity-60 hover:opacity-100 transition',\n variant === 'filled' && 'text-white hover:text-white',\n )}\n iconOnly\n size=\"xs\"\n variant=\"plain\"\n theme={variant === 'filled' ? 'primary' : 'secondary'}\n noOutlineOnFocus\n >\n <XIcon className=\"size-4\" />\n </Button>\n\n {/* Progress Bar Countdown */}\n {showProgressBar && duration > 0 && (\n <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-black/10 dark:bg-white/10 overflow-hidden\">\n <div\n className={buildClassName(\n 'h-full transition-all duration-75 ease-linear',\n variant === 'filled' ? 'bg-white/70' : progressBarColorMap[type],\n )}\n style={{ width: `${Math.max(0, progress)}%` }}\n />\n </div>\n )}\n </div>\n </Transition>\n )\n}\n\nToast.displayName = 'Toast'\n"],"names":["_jsx","CheckCircle","AlertCircle","Info","AlertTriangle","useState","useEffect","Transition","_jsxs","buildClassName","TextContent","Button","XIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Toast.js","sources":["../../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { Transition } from '@headlessui/react'\nimport XIcon from '../Icons/X.svg'\nimport CheckCircle from '../Icons/CircleCheck.svg'\nimport AlertCircle from '../Icons/CircleAlert.svg'\nimport Info from '../Icons/Info.svg'\nimport AlertTriangle from '../Icons/TriangleAlert.svg'\n\nimport { Button } from '../Button'\nimport { TextContent } from '../TextContent'\nimport { buildClassName } from '../../utils/build-classname'\n\nimport type { ToastProps, ToastType, ToastVariant } from './Toast.types'\n\n/**\n * Icons for each toast type\n */\nconst iconMap: Record<ToastType, React.ReactNode> = {\n success: <CheckCircle className=\"size-5 text-[var(--ui-success)]\" />,\n error: <AlertCircle className=\"size-5 text-[var(--ui-danger)]\" />,\n info: <Info className=\"size-5 text-[var(--ui-info)]\" />,\n warning: <AlertTriangle className=\"size-5 text-[var(--ui-warning)]\" />,\n}\n\nconst filledIconMap: Record<ToastType, React.ReactNode> = {\n success: <CheckCircle className=\"size-5 text-white\" />,\n error: <AlertCircle className=\"size-5 text-white\" />,\n info: <Info className=\"size-5 text-white\" />,\n warning: <AlertTriangle className=\"size-5 text-white\" />,\n}\n\nconst textColorMap: Record<ToastType, string> = {\n success: 'text-[var(--ui-success-text)]',\n error: 'text-[var(--ui-danger-text)]',\n info: 'text-[var(--ui-info-text)]',\n warning: 'text-[var(--ui-warning-text)]',\n}\n\nconst progressBarColorMap: Record<ToastType, string> = {\n success: 'bg-[var(--ui-success)]',\n error: 'bg-[var(--ui-danger)]',\n info: 'bg-[var(--ui-info)]',\n warning: 'bg-[var(--ui-warning)]',\n}\n\nconst variantStyleMap: Record<ToastVariant, Record<ToastType, string>> = {\n accent: {\n success:\n 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-success)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n error:\n 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-danger)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n info: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-info)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n warning:\n 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-warning)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n },\n filled: {\n success: 'bg-[var(--ui-success)] text-white shadow-lg',\n error: 'bg-[var(--ui-danger)] text-white shadow-lg',\n info: 'bg-[var(--ui-info)] text-white shadow-lg',\n warning: 'bg-[var(--ui-warning)] text-white shadow-lg',\n },\n outlined: {\n success:\n 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-success)] text-gray-900 dark:text-gray-100 shadow-md',\n error:\n 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-danger)] text-gray-900 dark:text-gray-100 shadow-md',\n info: 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-info)] text-gray-900 dark:text-gray-100 shadow-md',\n warning:\n 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-warning)] text-gray-900 dark:text-gray-100 shadow-md',\n },\n glass: {\n success:\n 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-emerald-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n error:\n 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-rose-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n info: 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-blue-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n warning:\n 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-amber-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n },\n}\n\nexport const Toast: React.FC<ToastProps & { isTop?: boolean }> = ({\n id,\n title,\n message,\n type,\n variant = 'accent',\n action,\n icon,\n showProgressBar = true,\n duration = 4000,\n isPaused = false,\n onClose,\n className,\n isTop = true,\n}) => {\n const [progress, setProgress] = useState(100)\n\n useEffect(() => {\n if (!showProgressBar || !duration || isPaused) return\n\n const intervalTime = 50\n const step = (intervalTime / duration) * 100\n\n const timer = setInterval(() => {\n setProgress((prev) => {\n if (prev <= 0) {\n clearInterval(timer)\n return 0\n }\n return prev - step\n })\n }, intervalTime)\n\n return () => clearInterval(timer)\n }, [showProgressBar, duration, isPaused])\n\n const enterFrom = isTop ? 'opacity-0 -translate-y-3 scale-95' : 'opacity-0 translate-y-3 scale-95'\n const leaveTo = isTop ? 'opacity-0 -translate-y-2 scale-95' : 'opacity-0 translate-y-2 scale-95'\n\n const renderedIcon = icon ?? (variant === 'filled' ? filledIconMap[type] : iconMap[type])\n\n return (\n <Transition\n appear\n show\n enter=\"transform transition duration-300 ease-out\"\n enterFrom={enterFrom}\n enterTo=\"opacity-100 translate-y-0 scale-100\"\n leave=\"transition duration-200 ease-in\"\n leaveFrom=\"opacity-100 translate-y-0 scale-100\"\n leaveTo={leaveTo}\n >\n <div\n role=\"status\"\n id={id.toString()}\n className={buildClassName(\n 'relative overflow-hidden flex items-start gap-3 rounded-xl px-4 py-3.5 min-w-[280px] max-w-md transition-all',\n variantStyleMap[variant][type],\n className,\n )}\n >\n {/* Icon */}\n <div className=\"shrink-0 mt-0.5\">\n {variant === 'filled' ? (\n renderedIcon\n ) : (\n <TextContent className={buildClassName(textColorMap[type])}>{renderedIcon}</TextContent>\n )}\n </div>\n\n {/* Content Body */}\n <div className=\"flex-1 flex flex-col gap-0.5\">\n {title && (\n <div\n className={buildClassName(\n 'font-semibold text-sm leading-snug',\n variant === 'filled' ? 'text-white' : 'text-gray-900 dark:text-gray-100',\n )}\n >\n {title}\n </div>\n )}\n <div\n className={buildClassName(\n 'text-sm font-medium leading-relaxed',\n variant === 'filled' ? 'text-white/95' : 'text-gray-700 dark:text-gray-300',\n )}\n >\n {message}\n </div>\n\n {/* Action Button */}\n {action && (\n <div className=\"mt-1.5\">\n <button\n type=\"button\"\n onClick={action.onClick}\n className={buildClassName(\n 'text-xs font-semibold underline underline-offset-2 transition-opacity focus:outline-none',\n variant === 'filled'\n ? 'text-white hover:opacity-85'\n : 'text-[var(--ui-primary)] hover:opacity-80',\n )}\n >\n {action.label}\n </button>\n </div>\n )}\n </div>\n\n {/* Close button */}\n <Button\n onClick={onClose}\n aria-label=\"Close toast\"\n className={buildClassName(\n 'shrink-0 mt-0.5 opacity-60 hover:opacity-100 focus-visible:opacity-100 transition',\n variant === 'filled' && 'text-white hover:text-white focus-visible:outline-current',\n )}\n iconOnly\n size=\"xs\"\n variant=\"plain\"\n theme={variant === 'filled' ? 'primary' : 'secondary'}\n >\n <XIcon className=\"size-4\" />\n </Button>\n\n {/* Progress Bar Countdown */}\n {showProgressBar && duration > 0 && (\n <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-black/10 dark:bg-white/10 overflow-hidden\">\n <div\n className={buildClassName(\n 'h-full transition-all duration-75 ease-linear',\n variant === 'filled' ? 'bg-white/70' : progressBarColorMap[type],\n )}\n style={{ width: `${Math.max(0, progress)}%` }}\n />\n </div>\n )}\n </div>\n </Transition>\n )\n}\n\nToast.displayName = 'Toast'\n"],"names":["_jsx","CheckCircle","AlertCircle","Info","AlertTriangle","useState","useEffect","Transition","_jsxs","buildClassName","TextContent","Button","XIcon"],"mappings":"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"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
const BREAKPOINT_QUERIES = {
|
|
6
|
+
medium: '(min-width: 768px)',
|
|
7
|
+
expanded: '(min-width: 1024px)',
|
|
8
|
+
};
|
|
9
|
+
// jsdom and some embedded webviews have no matchMedia; treat every query as
|
|
10
|
+
// unmatched there (the compact layout) rather than throwing.
|
|
11
|
+
const hasMatchMedia = () => typeof window !== 'undefined' && typeof window.matchMedia === 'function';
|
|
12
|
+
/** Live result of a CSS media query. `false` during server rendering or without `matchMedia`. */
|
|
13
|
+
const useMediaQuery = (query) => {
|
|
14
|
+
const subscribe = React.useCallback((onChange) => {
|
|
15
|
+
if (!hasMatchMedia())
|
|
16
|
+
return () => { };
|
|
17
|
+
const list = window.matchMedia(query);
|
|
18
|
+
list.addEventListener('change', onChange);
|
|
19
|
+
return () => list.removeEventListener('change', onChange);
|
|
20
|
+
}, [query]);
|
|
21
|
+
return React.useSyncExternalStore(subscribe, () => hasMatchMedia() && window.matchMedia(query).matches, () => false);
|
|
22
|
+
};
|
|
23
|
+
/** Current layout range; `compact` during server rendering. */
|
|
24
|
+
const useBreakpoint = () => {
|
|
25
|
+
const isMedium = useMediaQuery(BREAKPOINT_QUERIES.medium);
|
|
26
|
+
const isExpanded = useMediaQuery(BREAKPOINT_QUERIES.expanded);
|
|
27
|
+
if (isExpanded)
|
|
28
|
+
return 'expanded';
|
|
29
|
+
return isMedium ? 'medium' : 'compact';
|
|
30
|
+
};
|
|
31
|
+
/** Resolves a `ResponsiveValue` for the current viewport. */
|
|
32
|
+
const useResponsiveValue = (value) => {
|
|
33
|
+
var _a, _b, _c;
|
|
34
|
+
const breakpoint = useBreakpoint();
|
|
35
|
+
if (typeof value !== 'object' || value === null || !('base' in value))
|
|
36
|
+
return value;
|
|
37
|
+
if (breakpoint === 'expanded')
|
|
38
|
+
return (_b = (_a = value.lg) !== null && _a !== void 0 ? _a : value.md) !== null && _b !== void 0 ? _b : value.base;
|
|
39
|
+
if (breakpoint === 'medium')
|
|
40
|
+
return (_c = value.md) !== null && _c !== void 0 ? _c : value.base;
|
|
41
|
+
return value.base;
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
exports.BREAKPOINT_QUERIES = BREAKPOINT_QUERIES;
|
|
45
|
+
exports.useBreakpoint = useBreakpoint;
|
|
46
|
+
exports.useMediaQuery = useMediaQuery;
|
|
47
|
+
exports.useResponsiveValue = useResponsiveValue;
|
|
48
|
+
//# sourceMappingURL=use-breakpoint.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-breakpoint.js","sources":["../../../../src/hooks/use-breakpoint.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react'\n\n/**\n * Layout ranges matching Tailwind's `md` (768px) and `lg` (1024px) tokens, so a\n * JS decision and an `md:`/`lg:` class always agree:\n * - `compact`: phones\n * - `medium`: tablets and narrow windows\n * - `expanded`: desktop\n *\n * Width only. Unlike `useIsMobile`, touch capability is never considered, so a\n * phone in landscape and a narrow desktop window get the layout for their size.\n */\nexport type Breakpoint = 'compact' | 'medium' | 'expanded'\n\nexport const BREAKPOINT_QUERIES = {\n medium: '(min-width: 768px)',\n expanded: '(min-width: 1024px)',\n} as const\n\n// jsdom and some embedded webviews have no matchMedia; treat every query as\n// unmatched there (the compact layout) rather than throwing.\nconst hasMatchMedia = () => typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n\n/** Live result of a CSS media query. `false` during server rendering or without `matchMedia`. */\nexport const useMediaQuery = (query: string): boolean => {\n const subscribe = useCallback(\n (onChange: () => void) => {\n if (!hasMatchMedia()) return () => {}\n const list = window.matchMedia(query)\n list.addEventListener('change', onChange)\n return () => list.removeEventListener('change', onChange)\n },\n [query],\n )\n\n return useSyncExternalStore(\n subscribe,\n () => hasMatchMedia() && window.matchMedia(query).matches,\n () => false,\n )\n}\n\n/** Current layout range; `compact` during server rendering. */\nexport const useBreakpoint = (): Breakpoint => {\n const isMedium = useMediaQuery(BREAKPOINT_QUERIES.medium)\n const isExpanded = useMediaQuery(BREAKPOINT_QUERIES.expanded)\n if (isExpanded) return 'expanded'\n return isMedium ? 'medium' : 'compact'\n}\n\n/** A value per breakpoint; missing ranges fall back to the next smaller one. */\nexport type ResponsiveValue<T> = T | { base: T; md?: T; lg?: T }\n\n/** Resolves a `ResponsiveValue` for the current viewport. */\nexport const useResponsiveValue = <T,>(value: ResponsiveValue<T>): T => {\n const breakpoint = useBreakpoint()\n if (typeof value !== 'object' || value === null || !('base' in value)) return value as T\n if (breakpoint === 'expanded') return value.lg ?? value.md ?? value.base\n if (breakpoint === 'medium') return value.md ?? value.base\n return value.base\n}\n"],"names":["useCallback","useSyncExternalStore"],"mappings":";;;;AAcO,MAAM,kBAAkB,GAAG;AAChC,IAAA,MAAM,EAAE,oBAAoB;AAC5B,IAAA,QAAQ,EAAE,qBAAqB;;AAGjC;AACA;AACA,MAAM,aAAa,GAAG,MAAM,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU;AAEpG;AACO,MAAM,aAAa,GAAG,CAAC,KAAa,KAAa;AACtD,IAAA,MAAM,SAAS,GAAGA,iBAAW,CAC3B,CAAC,QAAoB,KAAI;QACvB,IAAI,CAAC,aAAa,EAAE;AAAE,YAAA,OAAO,MAAK,EAAE,CAAC;QACrC,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;AACrC,QAAA,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC;QACzC,OAAO,MAAM,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC3D,IAAA,CAAC,EACD,CAAC,KAAK,CAAC,CACR;IAED,OAAOC,0BAAoB,CACzB,SAAS,EACT,MAAM,aAAa,EAAE,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,EACzD,MAAM,KAAK,CACZ;AACH;AAEA;AACO,MAAM,aAAa,GAAG,MAAiB;IAC5C,MAAM,QAAQ,GAAG,aAAa,CAAC,kBAAkB,CAAC,MAAM,CAAC;IACzD,MAAM,UAAU,GAAG,aAAa,CAAC,kBAAkB,CAAC,QAAQ,CAAC;AAC7D,IAAA,IAAI,UAAU;AAAE,QAAA,OAAO,UAAU;IACjC,OAAO,QAAQ,GAAG,QAAQ,GAAG,SAAS;AACxC;AAKA;AACO,MAAM,kBAAkB,GAAG,CAAK,KAAyB,KAAO;;AACrE,IAAA,MAAM,UAAU,GAAG,aAAa,EAAE;AAClC,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,EAAE,MAAM,IAAI,KAAK,CAAC;AAAE,QAAA,OAAO,KAAU;IACxF,IAAI,UAAU,KAAK,UAAU;AAAE,QAAA,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK,CAAC,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK,CAAC,IAAI;IACxE,IAAI,UAAU,KAAK,QAAQ;QAAE,OAAO,CAAA,EAAA,GAAA,KAAK,CAAC,EAAE,mCAAI,KAAK,CAAC,IAAI;IAC1D,OAAO,KAAK,CAAC,IAAI;AACnB;;;;;;;"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -58,6 +58,7 @@ var Textarea = require('./components/Textarea/Textarea.js');
|
|
|
58
58
|
var ToastProvider = require('./components/Toast/ToastProvider.js');
|
|
59
59
|
var Toast = require('./components/Toast/Toast.js');
|
|
60
60
|
var VirtualizedDataTable = require('./components/VirtualizedDataTable/VirtualizedDataTable.js');
|
|
61
|
+
var useBreakpoint = require('./hooks/use-breakpoint.js');
|
|
61
62
|
var useDebounce = require('./hooks/use-debounce.js');
|
|
62
63
|
var useIsMobile = require('./hooks/use-is-mobile.js');
|
|
63
64
|
var useIsTablet = require('./hooks/use-is-tablet.js');
|
|
@@ -151,6 +152,10 @@ exports.ToastProvider = ToastProvider.ToastProvider;
|
|
|
151
152
|
exports.useToast = ToastProvider.useToast;
|
|
152
153
|
exports.Toast = Toast.Toast;
|
|
153
154
|
exports.VirtualizedDataTable = VirtualizedDataTable.VirtualizedDataTable;
|
|
155
|
+
exports.BREAKPOINT_QUERIES = useBreakpoint.BREAKPOINT_QUERIES;
|
|
156
|
+
exports.useBreakpoint = useBreakpoint.useBreakpoint;
|
|
157
|
+
exports.useMediaQuery = useBreakpoint.useMediaQuery;
|
|
158
|
+
exports.useResponsiveValue = useBreakpoint.useResponsiveValue;
|
|
154
159
|
exports.useDebounce = useDebounce.useDebounce;
|
|
155
160
|
exports.useDebounceFn = useDebounce.useDebounceFn;
|
|
156
161
|
exports.useIsMobile = useIsMobile.useIsMobile;
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -31,7 +31,7 @@ const Banner = forwardRef((props, ref) => {
|
|
|
31
31
|
const { type = 'info', iconSize = 'sm', children, icon, removable = false, onRemove, className, ...restProps } = props;
|
|
32
32
|
const DefaultIcon = IconMap[type];
|
|
33
33
|
const iconNode = icon !== undefined ? (icon) : (jsx(DefaultIcon, { "data-testid": `banner-${type}-icon`, className: buildClassName('shrink-0', sizeMap[iconSize]) }));
|
|
34
|
-
return (jsxs("div", { ref: ref, className: buildClassName('text-sm rounded-md flex w-full p-3 items-center gap-3 ring-1 ring-inset', TypeClassMap[type], className), "data-testid": `banner-${type}`, ...restProps, children: [iconNode, jsx("div", { className: "flex items-center w-full justify-between", children: children }), removable && (jsx(Button, { iconOnly: true, "aria-label": "Dismiss banner", size: "xs", variant: "plain",
|
|
34
|
+
return (jsxs("div", { ref: ref, className: buildClassName('text-sm rounded-md flex w-full p-3 items-center gap-3 ring-1 ring-inset', TypeClassMap[type], className), "data-testid": `banner-${type}`, ...restProps, children: [iconNode, jsx("div", { className: "flex items-center w-full justify-between", children: children }), removable && (jsx(Button, { iconOnly: true, "aria-label": "Dismiss banner", size: "xs", variant: "plain", className: "text-current focus-visible:outline-current shrink-0", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), "data-testid": "banner-remove-btn", children: jsx(SvgX, { className: "size-4.5", "data-testid": "banner-remove-icon" }) }))] }));
|
|
35
35
|
});
|
|
36
36
|
Banner.displayName = 'Banner';
|
|
37
37
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","sources":["../../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport TriangleAlertIcon from '../Icons/TriangleAlert.svg'\nimport CircleXIcon from '../Icons/CircleX.svg'\nimport CircleCheckIcon from '../Icons/CircleCheck.svg'\nimport InfoIcon from '../Icons/Info.svg'\nimport XIcon from '../Icons/X.svg'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Button } from '../Button'\nimport { BannerProps } from './Banner.types'\n\nconst sizeMap = {\n xs: 'size-4',\n sm: 'size-5',\n md: 'size-6',\n lg: 'size-8',\n xl: 'size-10',\n}\n\nconst IconMap = {\n info: InfoIcon,\n error: CircleXIcon,\n success: CircleCheckIcon,\n warning: TriangleAlertIcon,\n}\n\nconst TypeClassMap = {\n info: 'bg-[var(--ui-info-light)] ring-[var(--ui-info-ring-subtle)] text-[var(--ui-info-text)]',\n error:\n 'bg-[var(--ui-danger-light)] ring-[var(--ui-danger-ring-subtle)] text-[var(--ui-danger-text)]',\n success:\n 'bg-[var(--ui-success-light)] ring-[var(--ui-success-ring-subtle)] text-[var(--ui-success-text)]',\n warning:\n 'bg-[var(--ui-warning-light)] ring-[var(--ui-warning-ring-subtle)] text-[var(--ui-warning-text)]',\n}\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>((props, ref) => {\n const {\n type = 'info',\n iconSize = 'sm',\n children,\n icon,\n removable = false,\n onRemove,\n className,\n ...restProps\n } = props\n\n const DefaultIcon = IconMap[type]\n const iconNode =\n icon !== undefined ? (\n icon\n ) : (\n <DefaultIcon\n data-testid={`banner-${type}-icon`}\n className={buildClassName('shrink-0', sizeMap[iconSize])}\n />\n )\n\n return (\n <div\n ref={ref}\n className={buildClassName(\n 'text-sm rounded-md flex w-full p-3 items-center gap-3 ring-1 ring-inset',\n TypeClassMap[type],\n className,\n )}\n data-testid={`banner-${type}`}\n {...restProps}\n >\n {iconNode}\n <div className=\"flex items-center w-full justify-between\">{children}</div>\n {removable && (\n <Button\n iconOnly\n aria-label=\"Dismiss banner\"\n size=\"xs\"\n variant=\"plain\"\n
|
|
1
|
+
{"version":3,"file":"Banner.js","sources":["../../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport TriangleAlertIcon from '../Icons/TriangleAlert.svg'\nimport CircleXIcon from '../Icons/CircleX.svg'\nimport CircleCheckIcon from '../Icons/CircleCheck.svg'\nimport InfoIcon from '../Icons/Info.svg'\nimport XIcon from '../Icons/X.svg'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Button } from '../Button'\nimport { BannerProps } from './Banner.types'\n\nconst sizeMap = {\n xs: 'size-4',\n sm: 'size-5',\n md: 'size-6',\n lg: 'size-8',\n xl: 'size-10',\n}\n\nconst IconMap = {\n info: InfoIcon,\n error: CircleXIcon,\n success: CircleCheckIcon,\n warning: TriangleAlertIcon,\n}\n\nconst TypeClassMap = {\n info: 'bg-[var(--ui-info-light)] ring-[var(--ui-info-ring-subtle)] text-[var(--ui-info-text)]',\n error:\n 'bg-[var(--ui-danger-light)] ring-[var(--ui-danger-ring-subtle)] text-[var(--ui-danger-text)]',\n success:\n 'bg-[var(--ui-success-light)] ring-[var(--ui-success-ring-subtle)] text-[var(--ui-success-text)]',\n warning:\n 'bg-[var(--ui-warning-light)] ring-[var(--ui-warning-ring-subtle)] text-[var(--ui-warning-text)]',\n}\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>((props, ref) => {\n const {\n type = 'info',\n iconSize = 'sm',\n children,\n icon,\n removable = false,\n onRemove,\n className,\n ...restProps\n } = props\n\n const DefaultIcon = IconMap[type]\n const iconNode =\n icon !== undefined ? (\n icon\n ) : (\n <DefaultIcon\n data-testid={`banner-${type}-icon`}\n className={buildClassName('shrink-0', sizeMap[iconSize])}\n />\n )\n\n return (\n <div\n ref={ref}\n className={buildClassName(\n 'text-sm rounded-md flex w-full p-3 items-center gap-3 ring-1 ring-inset',\n TypeClassMap[type],\n className,\n )}\n data-testid={`banner-${type}`}\n {...restProps}\n >\n {iconNode}\n <div className=\"flex items-center w-full justify-between\">{children}</div>\n {removable && (\n <Button\n iconOnly\n aria-label=\"Dismiss banner\"\n size=\"xs\"\n variant=\"plain\"\n className=\"text-current focus-visible:outline-current shrink-0\"\n onClick={() => onRemove?.()}\n data-testid=\"banner-remove-btn\"\n >\n <XIcon className=\"size-4.5\" data-testid=\"banner-remove-icon\" />\n </Button>\n )}\n </div>\n )\n})\n\nBanner.displayName = 'Banner'\n"],"names":["InfoIcon","CircleXIcon","CircleCheckIcon","TriangleAlertIcon","_jsx","_jsxs","XIcon"],"mappings":";;;;;;;;;;AAUA,MAAM,OAAO,GAAG;AACd,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,SAAS;CACd;AAED,MAAM,OAAO,GAAG;AACd,IAAA,IAAI,EAAEA,OAAQ;AACd,IAAA,KAAK,EAAEC,UAAW;AAClB,IAAA,OAAO,EAAEC,cAAe;AACxB,IAAA,OAAO,EAAEC,gBAAiB;CAC3B;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,wFAAwF;AAC9F,IAAA,KAAK,EACH,8FAA8F;AAChG,IAAA,OAAO,EACL,iGAAiG;AACnG,IAAA,OAAO,EACL,iGAAiG;CACpG;AAEM,MAAM,MAAM,GAAG,UAAU,CAA8B,CAAC,KAAK,EAAE,GAAG,KAAI;IAC3E,MAAM,EACJ,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,IAAI,EACf,QAAQ,EACR,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK;AAET,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;AACjC,IAAA,MAAM,QAAQ,GACZ,IAAI,KAAK,SAAS,IAChB,IAAI,KAEJC,GAAA,CAAC,WAAW,EAAA,EAAA,aAAA,EACG,CAAA,OAAA,EAAU,IAAI,CAAA,KAAA,CAAO,EAClC,SAAS,EAAE,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAA,CACxD,CACH;AAEH,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,cAAc,CACvB,yEAAyE,EACzE,YAAY,CAAC,IAAI,CAAC,EAClB,SAAS,CACV,EAAA,aAAA,EACY,CAAA,OAAA,EAAU,IAAI,EAAE,EAAA,GACzB,SAAS,aAEZ,QAAQ,EACTD,aAAK,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAO,EACzE,SAAS,KACRA,IAAC,MAAM,EAAA,EACL,QAAQ,EAAA,IAAA,EAAA,YAAA,EACG,gBAAgB,EAC3B,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,qDAAqD,EAC/D,OAAO,EAAE,MAAM,QAAQ,KAAA,IAAA,IAAR,QAAQ,uBAAR,QAAQ,EAAI,iBACf,mBAAmB,EAAA,QAAA,EAE/BA,IAACE,IAAK,EAAA,EAAC,SAAS,EAAC,UAAU,iBAAa,oBAAoB,EAAA,CAAG,GACxD,CACV,CAAA,EAAA,CACG;AAEV,CAAC;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
|
|
@@ -1,20 +1,23 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { buildClassName } from '../../utils/build-classname.js';
|
|
3
3
|
|
|
4
|
-
function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels = 'always', theme = 'light', activeIndicatorStyle = 'line', containerClass = '', itemClass = '', }) {
|
|
4
|
+
function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels = 'always', theme = 'light', activeIndicatorStyle = 'line', containerClass = '', itemClass = '', linkAs = 'a', linkHrefProp = 'href', ariaLabel = 'Bottom Navigation', hidden = false, }) {
|
|
5
5
|
const handleTabClick = (item) => {
|
|
6
6
|
var _a;
|
|
7
7
|
if (item.disabled)
|
|
8
8
|
return;
|
|
9
9
|
(_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
|
|
10
|
-
onChange(item.id);
|
|
10
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(item.id);
|
|
11
11
|
};
|
|
12
|
+
// Removed from the tree, not just covered, so hidden tabs can't take focus.
|
|
13
|
+
if (hidden)
|
|
14
|
+
return null;
|
|
12
15
|
const themeStyles = {
|
|
13
16
|
light: 'bg-white dark:bg-gray-900 border-t border-[var(--ui-border)] text-gray-600 dark:text-gray-400',
|
|
14
17
|
dark: 'bg-gray-900 text-gray-400 border-t border-gray-800',
|
|
15
18
|
primary: 'bg-blue-600 text-blue-100 border-t border-blue-700',
|
|
16
19
|
}[theme];
|
|
17
|
-
return (jsx("nav", { "aria-label":
|
|
20
|
+
return (jsx("nav", { "aria-label": ariaLabel, className: buildClassName('w-full flex items-center justify-around select-none shadow-lg transition-colors relative', fixed && 'fixed bottom-0 left-0 right-0 z-40', 'pb-[env(safe-area-inset-bottom,6px)] px-2', themeStyles, containerClass), "data-testid": "bottom-navigation", children: items.map((item) => {
|
|
18
21
|
const isActive = item.id === activeId;
|
|
19
22
|
const showLabelText = showLabels === 'always' || (showLabels === 'active' && isActive);
|
|
20
23
|
const activeItemColor = {
|
|
@@ -37,11 +40,17 @@ function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels
|
|
|
37
40
|
info: 'bg-blue-500 text-white',
|
|
38
41
|
success: 'bg-emerald-500 text-white',
|
|
39
42
|
}[item.badgeVariant || 'danger'];
|
|
40
|
-
|
|
43
|
+
// A disabled item stays a button: a link can't be disabled.
|
|
44
|
+
const isLink = Boolean(item.href) && !item.disabled;
|
|
45
|
+
const ItemElement = isLink ? linkAs : 'button';
|
|
46
|
+
const elementProps = isLink
|
|
47
|
+
? { [linkHrefProp]: item.href }
|
|
48
|
+
: { type: 'button', disabled: item.disabled };
|
|
49
|
+
return (jsxs(ItemElement, { ...elementProps, onClick: () => handleTabClick(item), className: buildClassName('flex-1 flex flex-col items-center justify-center pt-2 pb-1.5 px-1 transition-all duration-200 relative cursor-pointer group', item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none', isActive ? activeItemColor : inactiveItemColor, itemClass), "data-testid": `bottom-nav-item-${item.id}`, "aria-current": isActive ? 'page' : undefined, "aria-label": !showLabelText && typeof item.label === 'string' ? item.label : undefined, children: [activeIndicatorStyle === 'line' && isActive && (jsx("span", { className: buildClassName('absolute -top-[1px] h-0.75 w-9 rounded-full transition-all duration-200 z-10', theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400') })), jsxs("div", { className: buildClassName('relative inline-flex items-center justify-center transition-all duration-200', activeIndicatorStyle === 'pill'
|
|
41
50
|
? buildClassName('px-4 py-1 rounded-full', isActive
|
|
42
51
|
? pillActiveStyles
|
|
43
52
|
: 'group-hover:bg-gray-100/50 dark:group-hover:bg-gray-800/40')
|
|
44
|
-
: 'px-1 py-0.5'), children: [jsx("span", { className: "text-xl transition-transform duration-150 group-active:scale-95", children: isActive && item.activeIcon ? item.activeIcon : item.icon }), item.badge !== undefined && item.badge !== null && (jsx("span", { className: buildClassName('absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full text-[10px] font-bold flex items-center justify-center shadow-xs z-10', badgeColor), "data-testid": `bottom-nav-badge-${item.id}`, children: item.badge }))] }), showLabelText && (jsx("span", { className: buildClassName('text-[11px] leading-tight mt-1 truncate max-w-full transition-colors duration-150', isActive ? 'font-bold' : 'font-medium opacity-90'), children: item.label })), activeIndicatorStyle === 'dot' && isActive && (jsx("span", { className: buildClassName('size-1.5 rounded-full mt-1 transition-all duration-200', theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400') }))] }, item.id));
|
|
53
|
+
: 'px-1 py-0.5'), children: [jsx("span", { className: "text-xl transition-transform duration-150 group-active:scale-95", "aria-hidden": "true", children: isActive && item.activeIcon ? item.activeIcon : item.icon }), item.badge !== undefined && item.badge !== null && (jsx("span", { className: buildClassName('absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full text-[10px] font-bold flex items-center justify-center shadow-xs z-10', badgeColor), "data-testid": `bottom-nav-badge-${item.id}`, children: item.badge }))] }), showLabelText && (jsx("span", { className: buildClassName('text-[11px] leading-tight mt-1 truncate max-w-full transition-colors duration-150', isActive ? 'font-bold' : 'font-medium opacity-90'), children: item.label })), activeIndicatorStyle === 'dot' && isActive && (jsx("span", { className: buildClassName('size-1.5 rounded-full mt-1 transition-all duration-200', theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400') }))] }, item.id));
|
|
45
54
|
}) }));
|
|
46
55
|
}
|
|
47
56
|
BottomNavigation.displayName = 'BottomNavigation';
|