@lobehub/ui 6.0.0-beta.4 → 6.0.0-beta.6
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/es/ActionIcon/style.mjs +1 -1
- package/es/ActionIcon/style.mjs.map +1 -1
- package/es/Anchor/Anchor.mjs +2 -2
- package/es/Anchor/Anchor.mjs.map +1 -1
- package/es/Carousel/Carousel.mjs +1 -1
- package/es/Carousel/Carousel.mjs.map +1 -1
- package/es/CodeDiff/CodeDiff.mjs.map +1 -1
- package/es/CodeDiff/PatchDiff.mjs.map +1 -1
- package/es/CodeDiff/theme.mjs.map +1 -1
- package/es/CodeDiff/type.d.mts +2 -2
- package/es/CodeEditor/CodeEditor.mjs +1 -1
- package/es/CodeEditor/CodeEditor.mjs.map +1 -1
- package/es/ColorPicker/ColorPicker.mjs +1 -1
- package/es/ColorPicker/ColorPicker.mjs.map +1 -1
- package/es/ColorSwatches/ColorSwatches.mjs +18 -23
- package/es/ColorSwatches/ColorSwatches.mjs.map +1 -1
- package/es/ColorSwatches/CustomPicker.mjs +101 -0
- package/es/ColorSwatches/CustomPicker.mjs.map +1 -0
- package/es/ColorSwatches/index.d.mts +2 -2
- package/es/ColorSwatches/marker.stylex.mjs +9 -0
- package/es/ColorSwatches/marker.stylex.mjs.map +1 -0
- package/es/ColorSwatches/style.mjs +36 -0
- package/es/ColorSwatches/style.mjs.map +1 -1
- package/es/ColorSwatches/type.d.mts +9 -0
- package/es/ConfigProvider/cdnAssets.mjs +6 -0
- package/es/ConfigProvider/cdnAssets.mjs.map +1 -0
- package/es/ConfigProvider/index.mjs +2 -1
- package/es/ConfigProvider/index.mjs.map +1 -1
- package/es/ContextMenu/store.d.mts +0 -1
- package/es/ContextMenu/store.mjs.map +1 -1
- package/es/DatePicker/DatePicker.mjs +1 -1
- package/es/DatePicker/DatePicker.mjs.map +1 -1
- package/es/DatePicker/DateRangePicker.mjs +1 -1
- package/es/DatePicker/DateRangePicker.mjs.map +1 -1
- package/es/DraggablePanel/atoms.mjs +1 -1
- package/es/DraggablePanel/atoms.mjs.map +1 -1
- package/es/DraggableSideNav/DraggableSideNav.mjs +2 -2
- package/es/DraggableSideNav/DraggableSideNav.mjs.map +1 -1
- package/es/Drawer/atoms.mjs +1 -1
- package/es/Drawer/atoms.mjs.map +1 -1
- package/es/DropdownMenu/atoms.mjs +1 -1
- package/es/DropdownMenu/atoms.mjs.map +1 -1
- package/es/EditableText/ControlInput.mjs +42 -29
- package/es/EditableText/ControlInput.mjs.map +1 -1
- package/es/EditableText/EditableText.mjs +1 -1
- package/es/EditableText/EditableText.mjs.map +1 -1
- package/es/EmojiPicker/EmojiPicker.mjs +3 -9
- package/es/EmojiPicker/EmojiPicker.mjs.map +1 -1
- package/es/EmojiPicker/useEmojiMartI18n.mjs +37 -0
- package/es/EmojiPicker/useEmojiMartI18n.mjs.map +1 -0
- package/es/FormKit/engine/tanstack.mjs +1 -1
- package/es/FormKit/engine/tanstack.mjs.map +1 -1
- package/es/Grid/style.mjs +1 -1
- package/es/Grid/style.mjs.map +1 -1
- package/es/HotkeyInput/HotkeyInput.mjs +1 -1
- package/es/HotkeyInput/HotkeyInput.mjs.map +1 -1
- package/es/Image/type.d.mts +1 -0
- package/es/Image/viewer/ImageViewer.mjs +2 -1
- package/es/Image/viewer/ImageViewer.mjs.map +1 -1
- package/es/Image/viewer/Toolbar.mjs +19 -6
- package/es/Image/viewer/Toolbar.mjs.map +1 -1
- package/es/Image/viewer/ViewerChrome.mjs.map +1 -1
- package/es/ImageSelect/ImageSelect.mjs +1 -1
- package/es/ImageSelect/ImageSelect.mjs.map +1 -1
- package/es/Input/Input.mjs +7 -5
- package/es/Input/Input.mjs.map +1 -1
- package/es/Input/TextArea.mjs +1 -1
- package/es/Input/TextArea.mjs.map +1 -1
- package/es/Input/style.mjs +3 -3
- package/es/Input/style.mjs.map +1 -1
- package/es/Modal/atoms.mjs +3 -3
- package/es/Modal/atoms.mjs.map +1 -1
- package/es/Pagination/Pagination.mjs +1 -1
- package/es/Pagination/Pagination.mjs.map +1 -1
- package/es/Popover/PopoverInGroup.mjs +1 -1
- package/es/Popover/PopoverInGroup.mjs.map +1 -1
- package/es/Popover/atoms.mjs +1 -1
- package/es/Popover/atoms.mjs.map +1 -1
- package/es/Rate/Rate.mjs +1 -1
- package/es/Rate/Rate.mjs.map +1 -1
- package/es/ScrollShadow/ScrollShadow.mjs +1 -1
- package/es/ScrollShadow/ScrollShadow.mjs.map +1 -1
- package/es/SearchBar/SearchBar.mjs +31 -25
- package/es/SearchBar/SearchBar.mjs.map +1 -1
- package/es/Segmented/Segmented.mjs +1 -1
- package/es/Segmented/Segmented.mjs.map +1 -1
- package/es/Select/atoms.mjs +1 -1
- package/es/Select/atoms.mjs.map +1 -1
- package/es/Switch/atoms.mjs +1 -1
- package/es/Switch/atoms.mjs.map +1 -1
- package/es/Tabs/Tabs.mjs +35 -21
- package/es/Tabs/Tabs.mjs.map +1 -1
- package/es/ToggleGroup/ToggleGroup.mjs +1 -1
- package/es/ToggleGroup/ToggleGroup.mjs.map +1 -1
- package/es/Tooltip/TooltipInGroup.mjs +1 -1
- package/es/Tooltip/TooltipInGroup.mjs.map +1 -1
- package/es/Tooltip/TooltipStandalone.mjs +1 -1
- package/es/Tooltip/TooltipStandalone.mjs.map +1 -1
- package/es/Tree/Tree.mjs +1 -1
- package/es/Tree/Tree.mjs.map +1 -1
- package/es/awesome/Giscus/style.mjs +9 -9
- package/es/awesome/Giscus/style.mjs.map +1 -1
- package/es/awesome/Grainient/Grainient.d.mts +11 -0
- package/es/awesome/Grainient/Grainient.mjs +314 -0
- package/es/awesome/Grainient/Grainient.mjs.map +1 -0
- package/es/awesome/Grainient/index.d.mts +3 -0
- package/es/awesome/Grainient/style.mjs +23 -0
- package/es/awesome/Grainient/style.mjs.map +1 -0
- package/es/awesome/Grainient/type.d.mts +121 -0
- package/es/awesome/GridBackground/GridBackground.mjs +1 -1
- package/es/awesome/GridBackground/GridBackground.mjs.map +1 -1
- package/es/awesome/GridBackground/GridShowcase.mjs +4 -4
- package/es/awesome/GridBackground/GridShowcase.mjs.map +1 -1
- package/es/awesome/Spline/ParentSize.mjs +1 -1
- package/es/awesome/Spline/ParentSize.mjs.map +1 -1
- package/es/awesome/index.d.mts +4 -1
- package/es/awesome/index.mjs +2 -1
- package/es/chat/BackBottom/BackBottom.mjs +1 -1
- package/es/chat/BackBottom/BackBottom.mjs.map +1 -1
- package/es/chat/BackBottom/type.d.mts +2 -2
- package/es/chat/EditableMessage/EditableMessage.mjs +1 -1
- package/es/chat/EditableMessage/EditableMessage.mjs.map +1 -1
- package/es/chat/EditableMessageList/EditableMessageList.mjs +1 -1
- package/es/chat/EditableMessageList/EditableMessageList.mjs.map +1 -1
- package/es/chat/EditableMessageList/messageReducer.mjs +30 -23
- package/es/chat/EditableMessageList/messageReducer.mjs.map +1 -1
- package/es/chat/MessageModal/MessageModal.mjs +1 -1
- package/es/chat/MessageModal/MessageModal.mjs.map +1 -1
- package/es/chat/TokenTag/TokenTag.mjs +2 -3
- package/es/chat/TokenTag/TokenTag.mjs.map +1 -1
- package/es/dashboard/AuthLayout/Aside.d.mts +10 -0
- package/es/dashboard/AuthLayout/Aside.mjs +31 -0
- package/es/dashboard/AuthLayout/Aside.mjs.map +1 -0
- package/es/dashboard/AuthLayout/AuthLayout.d.mts +3 -1
- package/es/dashboard/AuthLayout/AuthLayout.mjs +93 -37
- package/es/dashboard/AuthLayout/AuthLayout.mjs.map +1 -1
- package/es/dashboard/AuthLayout/index.d.mts +3 -2
- package/es/dashboard/AuthLayout/style.mjs +98 -1
- package/es/dashboard/AuthLayout/style.mjs.map +1 -1
- package/es/dashboard/AuthLayout/type.d.mts +38 -2
- package/es/dashboard/AuthTools/AuthLocaleSwitch.d.mts +10 -0
- package/es/dashboard/AuthTools/AuthLocaleSwitch.mjs +33 -0
- package/es/dashboard/AuthTools/AuthLocaleSwitch.mjs.map +1 -0
- package/es/dashboard/AuthTools/AuthThemeSwitch.d.mts +10 -0
- package/es/dashboard/AuthTools/AuthThemeSwitch.mjs +59 -0
- package/es/dashboard/AuthTools/AuthThemeSwitch.mjs.map +1 -0
- package/es/dashboard/AuthTools/index.d.mts +4 -0
- package/es/dashboard/AuthTools/style.mjs +27 -0
- package/es/dashboard/AuthTools/style.mjs.map +1 -0
- package/es/dashboard/AuthTools/type.d.mts +29 -0
- package/es/dashboard/ChartGrid/ChartGrid.d.mts +10 -0
- package/es/dashboard/ChartGrid/ChartGrid.mjs +19 -0
- package/es/dashboard/ChartGrid/ChartGrid.mjs.map +1 -0
- package/es/dashboard/ChartGrid/index.d.mts +3 -0
- package/es/dashboard/ChartGrid/style.mjs +18 -0
- package/es/dashboard/ChartGrid/style.mjs.map +1 -0
- package/es/dashboard/ChartGrid/type.d.mts +8 -0
- package/es/dashboard/ConsoleNav/Skeleton.d.mts +15 -0
- package/es/dashboard/ConsoleNav/Skeleton.mjs +82 -0
- package/es/dashboard/ConsoleNav/Skeleton.mjs.map +1 -0
- package/es/dashboard/ConsoleNav/index.d.mts +3 -2
- package/es/dashboard/ConsoleNav/style.mjs +18 -0
- package/es/dashboard/ConsoleNav/style.mjs.map +1 -1
- package/es/dashboard/ConsoleNav/type.d.mts +13 -0
- package/es/dashboard/ConsoleShell/ConsoleShell.d.mts +1 -1
- package/es/dashboard/ConsoleShell/ConsoleShell.mjs +26 -6
- package/es/dashboard/ConsoleShell/ConsoleShell.mjs.map +1 -1
- package/es/dashboard/ConsoleShell/style.mjs +10 -0
- package/es/dashboard/ConsoleShell/style.mjs.map +1 -1
- package/es/dashboard/ConsoleShell/type.d.mts +11 -0
- package/es/dashboard/FilterSidebar/FilterSidebar.mjs +18 -17
- package/es/dashboard/FilterSidebar/FilterSidebar.mjs.map +1 -1
- package/es/dashboard/FilterStrip/FilterStrip.d.mts +11 -0
- package/es/dashboard/FilterStrip/FilterStrip.mjs +55 -0
- package/es/dashboard/FilterStrip/FilterStrip.mjs.map +1 -0
- package/es/dashboard/FilterStrip/index.d.mts +3 -0
- package/es/dashboard/FilterStrip/style.mjs +78 -0
- package/es/dashboard/FilterStrip/style.mjs.map +1 -0
- package/es/dashboard/FilterStrip/type.d.mts +25 -0
- package/es/dashboard/LabelWithKey/LabelWithKey.d.mts +10 -0
- package/es/dashboard/LabelWithKey/LabelWithKey.mjs +18 -0
- package/es/dashboard/LabelWithKey/LabelWithKey.mjs.map +1 -0
- package/es/dashboard/LabelWithKey/index.d.mts +3 -0
- package/es/dashboard/LabelWithKey/type.d.mts +11 -0
- package/es/dashboard/MetricStrip/MetricCell.mjs +81 -0
- package/es/dashboard/MetricStrip/MetricCell.mjs.map +1 -0
- package/es/dashboard/MetricStrip/MetricStrip.d.mts +13 -0
- package/es/dashboard/MetricStrip/MetricStrip.mjs +47 -0
- package/es/dashboard/MetricStrip/MetricStrip.mjs.map +1 -0
- package/es/dashboard/MetricStrip/index.d.mts +3 -0
- package/es/dashboard/MetricStrip/style.mjs +156 -0
- package/es/dashboard/MetricStrip/style.mjs.map +1 -0
- package/es/dashboard/MetricStrip/type.d.mts +36 -0
- package/es/dashboard/PageSkeleton/PageSkeleton.mjs +20 -18
- package/es/dashboard/PageSkeleton/PageSkeleton.mjs.map +1 -1
- package/es/dashboard/PageSkeleton/style.mjs +1 -1
- package/es/dashboard/PageSkeleton/style.mjs.map +1 -1
- package/es/dashboard/PageToolbar/PageToolbar.d.mts +10 -0
- package/es/dashboard/PageToolbar/PageToolbar.mjs +22 -0
- package/es/dashboard/PageToolbar/PageToolbar.mjs.map +1 -0
- package/es/dashboard/PageToolbar/index.d.mts +3 -0
- package/es/dashboard/PageToolbar/style.mjs +36 -0
- package/es/dashboard/PageToolbar/style.mjs.map +1 -0
- package/es/dashboard/PageToolbar/type.d.mts +11 -0
- package/es/dashboard/PanelSurface/PanelSurface.d.mts +10 -0
- package/es/dashboard/PanelSurface/PanelSurface.mjs +40 -0
- package/es/dashboard/PanelSurface/PanelSurface.mjs.map +1 -0
- package/es/dashboard/PanelSurface/index.d.mts +3 -0
- package/es/dashboard/PanelSurface/style.mjs +25 -0
- package/es/dashboard/PanelSurface/style.mjs.map +1 -0
- package/es/dashboard/PanelSurface/type.d.mts +17 -0
- package/es/dashboard/Section/Section.d.mts +10 -0
- package/es/dashboard/Section/Section.mjs +81 -0
- package/es/dashboard/Section/Section.mjs.map +1 -0
- package/es/dashboard/Section/index.d.mts +3 -0
- package/es/dashboard/Section/style.mjs +31 -0
- package/es/dashboard/Section/style.mjs.map +1 -0
- package/es/dashboard/Section/type.d.mts +23 -0
- package/es/dashboard/StatCard/StatCard.d.mts +2 -1
- package/es/dashboard/StatCard/StatCard.mjs +28 -91
- package/es/dashboard/StatCard/StatCard.mjs.map +1 -1
- package/es/dashboard/StatCard/type.d.mts +16 -5
- package/es/dashboard/Surface/Surface.d.mts +4 -3
- package/es/dashboard/Surface/Surface.mjs +91 -8
- package/es/dashboard/Surface/Surface.mjs.map +1 -1
- package/es/dashboard/Surface/index.d.mts +3 -2
- package/es/dashboard/Surface/link.d.mts +16 -0
- package/es/dashboard/Surface/link.mjs +40 -0
- package/es/dashboard/Surface/link.mjs.map +1 -0
- package/es/dashboard/Surface/marker.stylex.mjs +9 -0
- package/es/dashboard/Surface/marker.stylex.mjs.map +1 -0
- package/es/dashboard/Surface/style.d.mts +2 -0
- package/es/dashboard/Surface/style.mjs +155 -14
- package/es/dashboard/Surface/style.mjs.map +1 -1
- package/es/dashboard/Surface/type.d.mts +29 -1
- package/es/dashboard/TableIconActions/TableIconActions.d.mts +17 -0
- package/es/dashboard/TableIconActions/TableIconActions.mjs +39 -0
- package/es/dashboard/TableIconActions/TableIconActions.mjs.map +1 -0
- package/es/dashboard/TableIconActions/index.d.mts +3 -0
- package/es/dashboard/TableIconActions/type.d.mts +17 -0
- package/es/dashboard/TitleWithTips/TitleWithTips.d.mts +10 -0
- package/es/dashboard/TitleWithTips/TitleWithTips.mjs +28 -0
- package/es/dashboard/TitleWithTips/TitleWithTips.mjs.map +1 -0
- package/es/dashboard/TitleWithTips/index.d.mts +3 -0
- package/es/dashboard/TitleWithTips/type.d.mts +10 -0
- package/es/dashboard/index.d.mts +38 -4
- package/es/dashboard/index.mjs +17 -3
- package/es/hooks/useControlledState.mjs +20 -0
- package/es/hooks/useControlledState.mjs.map +1 -0
- package/es/hooks/useHighlight.mjs +2 -2
- package/es/hooks/useHighlight.mjs.map +1 -1
- package/es/hooks/useHover.mjs +22 -0
- package/es/hooks/useHover.mjs.map +1 -0
- package/es/hooks/useScroll.d.mts +8 -0
- package/es/hooks/useScroll.mjs +33 -0
- package/es/hooks/useScroll.mjs.map +1 -0
- package/es/hooks/useSize.mjs +26 -0
- package/es/hooks/useSize.mjs.map +1 -0
- package/es/internal/virtual/VirtualScrollArea.mjs +1 -1
- package/es/internal/virtual/VirtualScrollArea.mjs.map +1 -1
- package/es/mobile/ChatInputArea/ChatInputArea.mjs +1 -1
- package/es/mobile/ChatInputArea/ChatInputArea.mjs.map +1 -1
- package/es/mobile/TabBar/TabBar.mjs +1 -1
- package/es/mobile/TabBar/TabBar.mjs.map +1 -1
- package/es/node_modules/.pnpm/@eslint_core@1.2.1/node_modules/@eslint/core/dist/esm/types.d.mts +2 -46
- package/es/node_modules/.pnpm/@eslint_plugin-kit@0.7.3/node_modules/@eslint/plugin-kit/dist/cjs/index.d.mts +1 -1
- package/es/node_modules/.pnpm/@types_estree@1.0.9/node_modules/@types/estree/index.d.mts +1 -4
- package/es/node_modules/.pnpm/eslint@10.12.0_jiti@2.6.1_supports-color@10.2.2/node_modules/eslint/lib/types/index.d.mts +1 -1
- package/es/style.css +339 -32
- package/es/styles/theme/token/neutral.mjs +5 -5
- package/es/styles/theme/token/neutral.mjs.map +1 -1
- package/es/utils/colorMath.mjs +52 -0
- package/es/utils/colorMath.mjs.map +1 -0
- package/es/utils/formatNumber.mjs +7 -0
- package/es/utils/formatNumber.mjs.map +1 -0
- package/es/utils/genCdnUrl.mjs +6 -3
- package/es/utils/genCdnUrl.mjs.map +1 -1
- package/es/utils/hashString.mjs +19 -0
- package/es/utils/hashString.mjs.map +1 -0
- package/es/utils/mergeRefs.mjs +20 -0
- package/es/utils/mergeRefs.mjs.map +1 -0
- package/es/utils/placement.d.mts +5 -5
- package/es/utils/placement.mjs.map +1 -1
- package/package.json +16 -42
- package/es/dashboard/StatCard/style.mjs +0 -105
- package/es/dashboard/StatCard/style.mjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.mjs","names":["Input"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from '
|
|
1
|
+
{"version":3,"file":"SearchBar.mjs","names":["Input"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\n\nimport Spotlight from '@/awesome/Spotlight';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\nimport { Input } from '@/Input';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport { type SearchBarProps } from './type';\n\ntype HandlerEvent<K extends 'onBlur' | 'onChange' | 'onFocus' | 'onPressEnter'> = Parameters<\n NonNullable<SearchBarProps[K]>\n>[0];\n\nconst SearchBar = memo<SearchBarProps>(\n ({\n defaultValue = '',\n spotlight,\n className,\n value,\n onInputChange,\n placeholder,\n enableShortKey,\n shortKey = 'mod+k',\n onSearch,\n loading,\n style,\n onChange,\n onBlur,\n onPressEnter,\n onFocus,\n styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\n classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\n ...rest\n }) => {\n const [inputValue, setInputValue] = useControlledState(defaultValue, {\n defaultValue,\n onChange: onInputChange,\n value,\n });\n\n const [showTag, setShowTag] = useState<boolean>(true);\n const inputReference: any = useRef<HTMLInputElement>(null);\n const hotkey = useMemo(\n () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\n [shortKey],\n );\n\n const prefix = useMemo(\n () => (\n <Icon\n {...stylex.props(styles.icon)}\n icon={loading ? LucideLoader2 : Search}\n size=\"small\"\n spin={loading}\n style={{ marginRight: 4 }}\n />\n ),\n [loading],\n );\n\n const handleBlur = useEventCallback((e: HandlerEvent<'onBlur'>) => {\n onBlur?.(e);\n setInputValue(e.target.value);\n setShowTag(true);\n });\n\n const handleChange = useEventCallback((e: HandlerEvent<'onChange'>) => {\n setInputValue(e.target.value);\n onChange?.(e);\n });\n\n const handleFocus = useEventCallback((e: HandlerEvent<'onFocus'>) => {\n onFocus?.(e);\n setShowTag(false);\n });\n\n const handlePressEnter = useEventCallback((e: HandlerEvent<'onPressEnter'>) => {\n onPressEnter?.(e);\n onSearch?.(inputValue);\n });\n\n useHotkeys(\n hotkey,\n () => {\n if (!enableShortKey) return;\n inputReference.current?.focus();\n },\n {\n enableOnFormTags: true,\n enabled: !!enableShortKey && !!shortKey,\n preventDefault: true,\n },\n );\n\n return (\n <div {...styleProps(styles.search, className, style)}>\n {spotlight && <Spotlight />}\n <Input\n allowClear\n className={inputClassName}\n placeholder={placeholder ?? 'Type keywords...'}\n prefix={prefix}\n ref={inputReference}\n style={inputStyle}\n value={inputValue}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={handleFocus}\n onPressEnter={handlePressEnter}\n {...rest}\n />\n {enableShortKey && showTag && !inputValue && (\n <Hotkey\n compact\n keys={hotkey}\n styles={{ kbdStyle: { color: 'inherit' } }}\n {...styleProps(styles.tag, shortKeyClassName, shortKeyStyle)}\n />\n )}\n </div>\n );\n },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,YAAY,MAAsB,EACtC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EACN,OAAO,YACP,UAAU,kBACR,CAAC,GACL,YAAY,EACV,OAAO,gBACP,UAAU,sBACR,CAAC,GACL,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,mBAAmB,cAAc;EACnE;EACA,UAAU;EACV;CACF,CAAC;CACD,MAAM,CAAC,SAAS,cAAc,SAAkB,IAAI;CACpD,MAAM,iBAAsB,OAAyB,IAAI;CACzD,MAAM,SAAS,cAAc,SAAS,SAAS,GAAG,IAAI,WAAW,OAAO,YAAY,CAAC,QAAQ,CAAC;CAC9F,MAAM,SAAS,cAAc,oBAAC,MAAD;EAAM,GAAI,OAAO,MAAM,OAAO,IAAI;EAAG,MAAM,UAAU,gBAAgB;EAAQ,MAAK;EAAQ,MAAM;EAAS,OAAO,EAC3I,aAAa,EACf;CAAI,CAAA,GAAG,CAAC,OAAO,CAAC;CAChB,MAAM,aAAa,kBAAkB,MAA8B;EACjE,SAAS,CAAC;EACV,cAAc,EAAE,OAAO,KAAK;EAC5B,WAAW,IAAI;CACjB,CAAC;CACD,MAAM,eAAe,kBAAkB,MAAgC;EACrE,cAAc,EAAE,OAAO,KAAK;EAC5B,WAAW,CAAC;CACd,CAAC;CACD,MAAM,cAAc,kBAAkB,MAA+B;EACnE,UAAU,CAAC;EACX,WAAW,KAAK;CAClB,CAAC;CACD,MAAM,mBAAmB,kBAAkB,MAAoC;EAC7E,eAAe,CAAC;EAChB,WAAW,UAAU;CACvB,CAAC;CACD,WAAW,cAAc;EACvB,IAAI,CAAC,gBAAgB;EACrB,eAAe,SAAS,MAAM;CAChC,GAAG;EACD,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;CAClB,CAAC;CACD,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,QAAQ,WAAW,KAAK;EAAnD,UAAA;GACA,aAAa,oBAAC,WAAD,CAAY,CAAA;GAC1B,oBAACA,eAAD;IAAO,YAAA;IAAW,WAAW;IAAgB,aAAa,eAAe;IAA4B;IAAQ,KAAK;IAAgB,OAAO;IAAY,OAAO;IAAY,QAAQ;IAAY,UAAU;IAAc,SAAS;IAAa,cAAc;IAAkB,GAAI;GAAO,CAAA;GACpR,kBAAkB,WAAW,CAAC,cAAc,oBAAC,QAAD;IAAQ,SAAA;IAAQ,MAAM;IAAQ,QAAQ,EACrF,UAAU,EACR,OAAO,UACT,EACF;IAAG,GAAI,WAAW,OAAO,KAAK,mBAAmB,aAAa;GAAI,CAAA;EAC3D;;AACX,CAAC;AACD,UAAU,cAAc"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { useControlledState } from "../hooks/useControlledState.mjs";
|
|
2
3
|
import { SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedRoot } from "./atoms.mjs";
|
|
3
4
|
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
|
|
4
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
6
|
import clsx from "clsx";
|
|
6
|
-
import useControlledState from "use-merge-value";
|
|
7
7
|
//#region src/Segmented/Segmented.tsx
|
|
8
8
|
const normalizeOption = (option) => typeof option === "string" ? {
|
|
9
9
|
label: option,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Segmented.mjs","names":[],"sources":["../../src/Segmented/Segmented.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n type CSSProperties,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n} from 'react';\nimport useControlledState from '
|
|
1
|
+
{"version":3,"file":"Segmented.mjs","names":[],"sources":["../../src/Segmented/Segmented.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n type CSSProperties,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n} from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\n\nimport {\n SegmentedIndicator,\n SegmentedItem,\n SegmentedItemIcon,\n SegmentedItemLabel,\n SegmentedRoot,\n} from './atoms';\nimport type { SegmentedOption, SegmentedProps } from './type';\n\nconst normalizeOption = <Value extends string>(\n option: SegmentedOption<Value> | Value,\n): SegmentedOption<Value> =>\n typeof option === 'string' ? { label: option, value: option } : option;\n\nconst Segmented = <Value extends string = string>({\n block = false,\n className,\n classNames,\n defaultValue,\n disabled = false,\n glass = false,\n id,\n name,\n onChange,\n options,\n ref,\n shadow = false,\n size = 'middle',\n style,\n styles: customStyles,\n value,\n variant = 'filled',\n vertical = false,\n}: SegmentedProps<Value>) => {\n const [innerValue, setInnerValue] = useControlledState<Value | undefined>(defaultValue, {\n defaultValue,\n onChange: (next) => {\n if (next != null) onChange?.(next);\n },\n value,\n });\n\n const listRef = useRef<HTMLDivElement | null>(null);\n\n const mergedRef = useCallback(\n (node: HTMLDivElement | null) => {\n listRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.RefObject<HTMLDivElement | null>).current = node;\n },\n [ref],\n );\n\n const normalizedOptions = useMemo(\n () => (options ?? []).map((o) => normalizeOption<Value>(o)),\n [options],\n );\n\n const updateIndicator = useCallback(() => {\n const list = listRef.current;\n if (!list) return;\n const active = list.querySelector<HTMLElement>('[data-segmented-item][data-pressed]');\n if (!active) {\n list.style.setProperty('--active-item-left', '0px');\n list.style.setProperty('--active-item-top', '0px');\n list.style.setProperty('--active-item-right', '0px');\n list.style.setProperty('--active-item-width', '0px');\n list.style.setProperty('--active-item-height', '0px');\n return;\n }\n list.style.setProperty('--active-item-left', `${active.offsetLeft}px`);\n list.style.setProperty('--active-item-top', `${active.offsetTop}px`);\n list.style.setProperty(\n '--active-item-right',\n `${list.clientWidth - active.offsetLeft - active.offsetWidth}px`,\n );\n list.style.setProperty('--active-item-width', `${active.offsetWidth}px`);\n list.style.setProperty('--active-item-height', `${active.offsetHeight}px`);\n }, []);\n\n useLayoutEffect(() => {\n updateIndicator();\n }, [innerValue, normalizedOptions, vertical, size, block, updateIndicator]);\n\n useEffect(() => {\n const list = listRef.current;\n if (!list || typeof ResizeObserver === 'undefined') return;\n const ro = new ResizeObserver(() => updateIndicator());\n ro.observe(list);\n return () => ro.disconnect();\n }, [updateIndicator]);\n\n const groupValue = useMemo<Value[]>(() => (innerValue != null ? [innerValue] : []), [innerValue]);\n\n const rootStyle: CSSProperties = { ...style, ...customStyles?.root };\n\n return (\n <SegmentedRoot<Value>\n block={block}\n className={clsx(classNames?.root, className)}\n disabled={disabled}\n glass={glass}\n id={id}\n orientation={vertical ? 'vertical' : 'horizontal'}\n ref={mergedRef}\n shadow={shadow}\n style={rootStyle}\n value={groupValue}\n variant={variant}\n onValueChange={(next) => {\n const picked = next[0];\n if (picked != null) setInnerValue(picked);\n }}\n >\n <SegmentedIndicator className={classNames?.indicator} style={customStyles?.indicator} />\n {normalizedOptions.map((opt) => (\n <SegmentedItem<Value>\n aria-label={typeof opt.label === 'string' ? opt.label : undefined}\n block={block}\n className={clsx(classNames?.item, opt.className)}\n data-segmented-item=\"\"\n disabled={disabled || opt.disabled}\n key={opt.value}\n name={name}\n size={size}\n style={customStyles?.item}\n title={opt.title}\n value={opt.value}\n >\n {opt.icon != null && (\n <SegmentedItemIcon className={classNames?.itemIcon} style={customStyles?.itemIcon}>\n {opt.icon}\n </SegmentedItemIcon>\n )}\n {opt.label != null && (\n <SegmentedItemLabel className={classNames?.itemLabel} style={customStyles?.itemLabel}>\n {opt.label}\n </SegmentedItemLabel>\n )}\n </SegmentedItem>\n ))}\n </SegmentedRoot>\n );\n};\n\nSegmented.displayName = 'Segmented';\n\nexport default Segmented;\n"],"mappings":"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"}
|
package/es/Select/atoms.mjs
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { useAppElement } from "../ConfigProvider/AppElementContext.mjs";
|
|
3
3
|
import { styleProps } from "../styles/stylex/props.mjs";
|
|
4
4
|
import { useNativeButton } from "../hooks/useNativeButton.mjs";
|
|
5
|
+
import { mergeRefs, useMergeRefs } from "../utils/mergeRefs.mjs";
|
|
5
6
|
import { getFloatingCollisionPadding } from "../internal/floating/collisionPadding.mjs";
|
|
6
7
|
import { useThemeMode } from "../styles/theme/scope.mjs";
|
|
7
8
|
import { useLayerZIndex } from "../internal/zIndex/useLayerZIndex.mjs";
|
|
@@ -12,7 +13,6 @@ import { jsx } from "react/jsx-runtime";
|
|
|
12
13
|
import clsx from "clsx";
|
|
13
14
|
import * as stylex from "@stylexjs/stylex";
|
|
14
15
|
import { mergeProps } from "@base-ui/react/merge-props";
|
|
15
|
-
import { mergeRefs, useMergeRefs } from "react-merge-refs";
|
|
16
16
|
import { Select } from "@base-ui/react/select";
|
|
17
17
|
//#region src/Select/atoms.tsx
|
|
18
18
|
const mergeStateClassName = (base, className, extra) => {
|
package/es/Select/atoms.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atoms.mjs","names":[],"sources":["../../src/Select/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Select } from '@base-ui/react/select';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport {\n cloneElement,\n type ComponentProps,\n type ComponentPropsWithRef,\n isValidElement,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { menuClassNames, menuStyles } from '@/DropdownMenu/sharedStyle';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { styles, triggerStyles } from './style';\nimport { type SelectSize, type SelectVariant } from './type';\n\nconst mergeStateClassName = <TState,>(\n base: Parameters<typeof styleProps>[0],\n className: string | ((state: TState) => string | undefined) | undefined,\n extra?: string,\n) => {\n const baseClassName = styleProps(base, extra).className;\n if (typeof className === 'function')\n return (state: TState) => clsx(baseClassName, className(state));\n return clsx(baseClassName, className);\n};\n\nexport const SelectRoot = Select.Root;\nexport const SelectBackdrop = Select.Backdrop;\nexport const SelectSeparator = Select.Separator;\n\nexport type SelectTriggerProps = Omit<\n ComponentPropsWithRef<typeof Select.Trigger>,\n 'children' | 'render'\n> & {\n children: ComponentProps<typeof Select.Trigger>['children'];\n shadow?: boolean;\n size?: SelectSize;\n variant?: SelectVariant;\n};\n\nexport const SelectTrigger = ({\n children,\n className,\n nativeButton,\n shadow,\n size = 'middle',\n variant,\n ref: refProp,\n ...rest\n}: SelectTriggerProps) => {\n const { isDarkMode } = useThemeMode();\n const resolvedVariant = variant ?? (isDarkMode ? 'filled' : 'outlined');\n const triggerStyle = triggerStyles({ shadow, size, variant: resolvedVariant });\n const baseClassName = stylex.props(triggerStyle).className;\n\n const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n });\n\n if (isValidElement(children)) {\n return (\n <Select.Trigger\n {...rest}\n nativeButton={resolvedNativeButton}\n render={(props, state) => {\n // Base UI's trigger props include `type=\"button\"` by default.\n // If we render into a non-<button> element, that prop is invalid and can warn.\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ref: triggerRef, ...restProps } = props as any;\n return restProps;\n })();\n\n const mergedProps = mergeProps((children as any).props, resolvedProps);\n const childClassName =\n typeof (mergedProps as any).className === 'function'\n ? (mergedProps as any).className(state)\n : (mergedProps as any).className;\n const extraClassName = typeof className === 'function' ? className(state) : className;\n\n return cloneElement(children as any, {\n ...mergedProps,\n className: clsx(baseClassName, childClassName, extraClassName),\n ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n });\n }}\n />\n );\n }\n\n return (\n <Select.Trigger\n {...rest}\n className={mergeStateClassName([triggerStyle], className) as any}\n nativeButton={resolvedNativeButton}\n ref={refProp as any}\n >\n {children}\n </Select.Trigger>\n );\n};\n\nSelectTrigger.displayName = 'SelectTrigger';\n\nexport type SelectIconProps = ComponentProps<typeof Select.Icon>;\n\nexport const SelectIcon = ({ className, ...rest }: SelectIconProps) => {\n return <Select.Icon className={mergeStateClassName([styles.icon], className) as any} {...rest} />;\n};\n\nSelectIcon.displayName = 'SelectIcon';\n\nexport type SelectValueProps = ComponentProps<typeof Select.Value>;\n\nexport const SelectValue = ({ className, ...rest }: SelectValueProps) => {\n return (\n <Select.Value className={mergeStateClassName([styles.value], className) as any} {...rest} />\n );\n};\n\nSelectValue.displayName = 'SelectValue';\n\nexport type SelectPortalProps = ComponentProps<typeof Select.Portal> & {\n /**\n * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n */\n container?: HTMLElement | null;\n};\n\nexport const SelectPortal = ({ container, ...rest }: SelectPortalProps) => {\n const appElement = useAppElement();\n return <Select.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nSelectPortal.displayName = 'SelectPortal';\n\nexport type SelectPositionerProps = ComponentProps<typeof Select.Positioner>;\n\nexport const SelectPositioner = ({\n align,\n alignItemWithTrigger,\n className,\n collisionPadding,\n side,\n sideOffset,\n style,\n ref: forwardedRef,\n ...rest\n}: SelectPositionerProps) => {\n const explicitZIndex =\n typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n ? style.zIndex\n : undefined;\n const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n const composedRef = useMergeRefs([forwardedRef, zRef]);\n\n const resolvedStyle =\n typeof style === 'function'\n ? (state: any) => ({ zIndex, ...style(state) })\n : { zIndex, ...style };\n\n return (\n <Select.Positioner\n align={align ?? 'start'}\n alignItemWithTrigger={alignItemWithTrigger ?? false}\n className={mergeStateClassName([styles.positioner], className) as any}\n collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n ref={composedRef as any}\n side={side ?? 'bottom'}\n sideOffset={sideOffset ?? 6}\n style={resolvedStyle}\n {...rest}\n />\n );\n};\n\nSelectPositioner.displayName = 'SelectPositioner';\n\nexport type SelectPopupProps = ComponentProps<typeof Select.Popup>;\n\nexport const SelectPopup = ({ className, ...rest }: SelectPopupProps) => {\n return (\n <Select.Popup\n className={\n mergeStateClassName(\n [menuStyles.popup, styles.popup],\n className,\n menuClassNames.popup,\n ) as any\n }\n {...rest}\n />\n );\n};\n\nSelectPopup.displayName = 'SelectPopup';\n\nexport type SelectListProps = ComponentProps<typeof Select.List>;\n\nexport const SelectList = ({ className, ...rest }: SelectListProps) => {\n return <Select.List className={mergeStateClassName([styles.list], className) as any} {...rest} />;\n};\n\nSelectList.displayName = 'SelectList';\n\nexport type SelectItemProps = ComponentProps<typeof Select.Item>;\n\nexport const SelectItem = ({ className, ...rest }: SelectItemProps) => {\n return (\n <Select.Item className={mergeStateClassName([menuStyles.item], className) as any} {...rest} />\n );\n};\n\nSelectItem.displayName = 'SelectItem';\n\nexport type SelectItemTextProps = ComponentProps<typeof Select.ItemText>;\n\nexport const SelectItemText = ({ className, ...rest }: SelectItemTextProps) => {\n return (\n <Select.ItemText\n className={mergeStateClassName([menuStyles.label], className, menuClassNames.label) as any}\n {...rest}\n />\n );\n};\n\nSelectItemText.displayName = 'SelectItemText';\n\nexport type SelectItemIndicatorProps = ComponentProps<typeof Select.ItemIndicator>;\n\nexport const SelectItemIndicator = ({ className, ...rest }: SelectItemIndicatorProps) => {\n return (\n <Select.ItemIndicator\n className={mergeStateClassName([styles.itemIndicator], className) as any}\n {...rest}\n />\n );\n};\n\nSelectItemIndicator.displayName = 'SelectItemIndicator';\n\nexport type SelectGroupProps = ComponentProps<typeof Select.Group>;\n\nexport const SelectGroup = ({ className, ...rest }: SelectGroupProps) => {\n return <Select.Group className={className} {...rest} />;\n};\n\nSelectGroup.displayName = 'SelectGroup';\n\nexport type SelectGroupLabelProps = ComponentProps<typeof Select.GroupLabel>;\n\nexport const SelectGroupLabel = ({ className, ...rest }: SelectGroupLabelProps) => {\n return (\n <Select.GroupLabel\n className={mergeStateClassName([menuStyles.groupLabel], className) as any}\n {...rest}\n />\n );\n};\n\nSelectGroupLabel.displayName = 'SelectGroupLabel';\n\nexport type SelectScrollUpArrowProps = ComponentProps<typeof Select.ScrollUpArrow>;\n\nexport const SelectScrollUpArrow = ({ className, ...rest }: SelectScrollUpArrowProps) => {\n return (\n <Select.ScrollUpArrow\n className={mergeStateClassName([styles.scrollArrow], className) as any}\n {...rest}\n />\n );\n};\n\nSelectScrollUpArrow.displayName = 'SelectScrollUpArrow';\n\nexport type SelectScrollDownArrowProps = ComponentProps<typeof Select.ScrollDownArrow>;\n\nexport const SelectScrollDownArrow = ({ className, ...rest }: SelectScrollDownArrowProps) => {\n return (\n <Select.ScrollDownArrow\n className={mergeStateClassName([styles.scrollArrow], className) as any}\n {...rest}\n />\n );\n};\n\nSelectScrollDownArrow.displayName = 'SelectScrollDownArrow';\n\nexport type SelectArrowProps = ComponentProps<typeof Select.Arrow>;\n\nexport const SelectArrow = ({ className, ...rest }: SelectArrowProps) => {\n return (\n <Select.Arrow\n className={mergeStateClassName([styles.arrow], className, 'lobe-select-arrow') as any}\n {...rest}\n />\n );\n};\n\nSelectArrow.displayName = 'SelectArrow';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":[],"sources":["../../src/Select/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Select } from '@base-ui/react/select';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport {\n cloneElement,\n type ComponentProps,\n type ComponentPropsWithRef,\n isValidElement,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { menuClassNames, menuStyles } from '@/DropdownMenu/sharedStyle';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { styles, triggerStyles } from './style';\nimport { type SelectSize, type SelectVariant } from './type';\n\nconst mergeStateClassName = <TState,>(\n base: Parameters<typeof styleProps>[0],\n className: string | ((state: TState) => string | undefined) | undefined,\n extra?: string,\n) => {\n const baseClassName = styleProps(base, extra).className;\n if (typeof className === 'function')\n return (state: TState) => clsx(baseClassName, className(state));\n return clsx(baseClassName, className);\n};\n\nexport const SelectRoot = Select.Root;\nexport const SelectBackdrop = Select.Backdrop;\nexport const SelectSeparator = Select.Separator;\n\nexport type SelectTriggerProps = Omit<\n ComponentPropsWithRef<typeof Select.Trigger>,\n 'children' | 'render'\n> & {\n children: ComponentProps<typeof Select.Trigger>['children'];\n shadow?: boolean;\n size?: SelectSize;\n variant?: SelectVariant;\n};\n\nexport const SelectTrigger = ({\n children,\n className,\n nativeButton,\n shadow,\n size = 'middle',\n variant,\n ref: refProp,\n ...rest\n}: SelectTriggerProps) => {\n const { isDarkMode } = useThemeMode();\n const resolvedVariant = variant ?? (isDarkMode ? 'filled' : 'outlined');\n const triggerStyle = triggerStyles({ shadow, size, variant: resolvedVariant });\n const baseClassName = stylex.props(triggerStyle).className;\n\n const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n });\n\n if (isValidElement(children)) {\n return (\n <Select.Trigger\n {...rest}\n nativeButton={resolvedNativeButton}\n render={(props, state) => {\n // Base UI's trigger props include `type=\"button\"` by default.\n // If we render into a non-<button> element, that prop is invalid and can warn.\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ref: triggerRef, ...restProps } = props as any;\n return restProps;\n })();\n\n const mergedProps = mergeProps((children as any).props, resolvedProps);\n const childClassName =\n typeof (mergedProps as any).className === 'function'\n ? (mergedProps as any).className(state)\n : (mergedProps as any).className;\n const extraClassName = typeof className === 'function' ? className(state) : className;\n\n return cloneElement(children as any, {\n ...mergedProps,\n className: clsx(baseClassName, childClassName, extraClassName),\n ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n });\n }}\n />\n );\n }\n\n return (\n <Select.Trigger\n {...rest}\n className={mergeStateClassName([triggerStyle], className) as any}\n nativeButton={resolvedNativeButton}\n ref={refProp as any}\n >\n {children}\n </Select.Trigger>\n );\n};\n\nSelectTrigger.displayName = 'SelectTrigger';\n\nexport type SelectIconProps = ComponentProps<typeof Select.Icon>;\n\nexport const SelectIcon = ({ className, ...rest }: SelectIconProps) => {\n return <Select.Icon className={mergeStateClassName([styles.icon], className) as any} {...rest} />;\n};\n\nSelectIcon.displayName = 'SelectIcon';\n\nexport type SelectValueProps = ComponentProps<typeof Select.Value>;\n\nexport const SelectValue = ({ className, ...rest }: SelectValueProps) => {\n return (\n <Select.Value className={mergeStateClassName([styles.value], className) as any} {...rest} />\n );\n};\n\nSelectValue.displayName = 'SelectValue';\n\nexport type SelectPortalProps = ComponentProps<typeof Select.Portal> & {\n /**\n * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n */\n container?: HTMLElement | null;\n};\n\nexport const SelectPortal = ({ container, ...rest }: SelectPortalProps) => {\n const appElement = useAppElement();\n return <Select.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nSelectPortal.displayName = 'SelectPortal';\n\nexport type SelectPositionerProps = ComponentProps<typeof Select.Positioner>;\n\nexport const SelectPositioner = ({\n align,\n alignItemWithTrigger,\n className,\n collisionPadding,\n side,\n sideOffset,\n style,\n ref: forwardedRef,\n ...rest\n}: SelectPositionerProps) => {\n const explicitZIndex =\n typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n ? style.zIndex\n : undefined;\n const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n const composedRef = useMergeRefs([forwardedRef, zRef]);\n\n const resolvedStyle =\n typeof style === 'function'\n ? (state: any) => ({ zIndex, ...style(state) })\n : { zIndex, ...style };\n\n return (\n <Select.Positioner\n align={align ?? 'start'}\n alignItemWithTrigger={alignItemWithTrigger ?? false}\n className={mergeStateClassName([styles.positioner], className) as any}\n collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n ref={composedRef as any}\n side={side ?? 'bottom'}\n sideOffset={sideOffset ?? 6}\n style={resolvedStyle}\n {...rest}\n />\n );\n};\n\nSelectPositioner.displayName = 'SelectPositioner';\n\nexport type SelectPopupProps = ComponentProps<typeof Select.Popup>;\n\nexport const SelectPopup = ({ className, ...rest }: SelectPopupProps) => {\n return (\n <Select.Popup\n className={\n mergeStateClassName(\n [menuStyles.popup, styles.popup],\n className,\n menuClassNames.popup,\n ) as any\n }\n {...rest}\n />\n );\n};\n\nSelectPopup.displayName = 'SelectPopup';\n\nexport type SelectListProps = ComponentProps<typeof Select.List>;\n\nexport const SelectList = ({ className, ...rest }: SelectListProps) => {\n return <Select.List className={mergeStateClassName([styles.list], className) as any} {...rest} />;\n};\n\nSelectList.displayName = 'SelectList';\n\nexport type SelectItemProps = ComponentProps<typeof Select.Item>;\n\nexport const SelectItem = ({ className, ...rest }: SelectItemProps) => {\n return (\n <Select.Item className={mergeStateClassName([menuStyles.item], className) as any} {...rest} />\n );\n};\n\nSelectItem.displayName = 'SelectItem';\n\nexport type SelectItemTextProps = ComponentProps<typeof Select.ItemText>;\n\nexport const SelectItemText = ({ className, ...rest }: SelectItemTextProps) => {\n return (\n <Select.ItemText\n className={mergeStateClassName([menuStyles.label], className, menuClassNames.label) as any}\n {...rest}\n />\n );\n};\n\nSelectItemText.displayName = 'SelectItemText';\n\nexport type SelectItemIndicatorProps = ComponentProps<typeof Select.ItemIndicator>;\n\nexport const SelectItemIndicator = ({ className, ...rest }: SelectItemIndicatorProps) => {\n return (\n <Select.ItemIndicator\n className={mergeStateClassName([styles.itemIndicator], className) as any}\n {...rest}\n />\n );\n};\n\nSelectItemIndicator.displayName = 'SelectItemIndicator';\n\nexport type SelectGroupProps = ComponentProps<typeof Select.Group>;\n\nexport const SelectGroup = ({ className, ...rest }: SelectGroupProps) => {\n return <Select.Group className={className} {...rest} />;\n};\n\nSelectGroup.displayName = 'SelectGroup';\n\nexport type SelectGroupLabelProps = ComponentProps<typeof Select.GroupLabel>;\n\nexport const SelectGroupLabel = ({ className, ...rest }: SelectGroupLabelProps) => {\n return (\n <Select.GroupLabel\n className={mergeStateClassName([menuStyles.groupLabel], className) as any}\n {...rest}\n />\n );\n};\n\nSelectGroupLabel.displayName = 'SelectGroupLabel';\n\nexport type SelectScrollUpArrowProps = ComponentProps<typeof Select.ScrollUpArrow>;\n\nexport const SelectScrollUpArrow = ({ className, ...rest }: SelectScrollUpArrowProps) => {\n return (\n <Select.ScrollUpArrow\n className={mergeStateClassName([styles.scrollArrow], className) as any}\n {...rest}\n />\n );\n};\n\nSelectScrollUpArrow.displayName = 'SelectScrollUpArrow';\n\nexport type SelectScrollDownArrowProps = ComponentProps<typeof Select.ScrollDownArrow>;\n\nexport const SelectScrollDownArrow = ({ className, ...rest }: SelectScrollDownArrowProps) => {\n return (\n <Select.ScrollDownArrow\n className={mergeStateClassName([styles.scrollArrow], className) as any}\n {...rest}\n />\n );\n};\n\nSelectScrollDownArrow.displayName = 'SelectScrollDownArrow';\n\nexport type SelectArrowProps = ComponentProps<typeof Select.Arrow>;\n\nexport const SelectArrow = ({ className, ...rest }: SelectArrowProps) => {\n return (\n <Select.Arrow\n className={mergeStateClassName([styles.arrow], className, 'lobe-select-arrow') as any}\n {...rest}\n />\n );\n};\n\nSelectArrow.displayName = 'SelectArrow';\n"],"mappings":"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"}
|
package/es/Switch/atoms.mjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { styleProps } from "../styles/stylex/props.mjs";
|
|
3
3
|
import { focusRing } from "../styles/stylex/focusRing.mjs";
|
|
4
|
+
import { useControlledState } from "../hooks/useControlledState.mjs";
|
|
4
5
|
import { switchMarker } from "./marker.stylex.mjs";
|
|
5
6
|
import { styles } from "./style.mjs";
|
|
6
7
|
import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
|
|
@@ -9,7 +10,6 @@ import clsx from "clsx";
|
|
|
9
10
|
import * as stylex from "@stylexjs/stylex";
|
|
10
11
|
import { Switch } from "@base-ui/react/switch";
|
|
11
12
|
import { animate, motionValue } from "motion";
|
|
12
|
-
import useControlledState from "use-merge-value";
|
|
13
13
|
//#region src/Switch/atoms.tsx
|
|
14
14
|
const THUMB_METRICS = {
|
|
15
15
|
default: {
|
package/es/Switch/atoms.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atoms.mjs","names":[],"sources":["../../src/Switch/atoms.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { Switch } from '@base-ui/react/switch';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { animate, motionValue } from 'motion';\nimport type { CSSProperties, KeyboardEvent, MouseEvent, PointerEvent } from 'react';\nimport { createContext, use, useEffect, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { switchMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type {\n SwitchChangeEventHandler,\n SwitchContextType,\n SwitchIconPosition,\n SwitchIconProps,\n SwitchRootProps,\n SwitchSize,\n SwitchThumbProps,\n} from './type';\n\nconst THUMB_METRICS: Record<\n SwitchSize,\n { checkedX: number; pressedCheckedX: number; pressedWidth: number; width: number }\n> = {\n default: { checkedX: 14, pressedCheckedX: 10, pressedWidth: 22, width: 18 },\n small: { checkedX: 12, pressedCheckedX: 8, pressedWidth: 16, width: 12 },\n};\n\nconst rootSizeStyles = { default: styles.rootDefault, small: styles.rootSmall };\nconst thumbSizeStyles = { default: styles.thumbDefault, small: styles.thumbSmall };\n\nconst THUMB_SPRING = { damping: 24, stiffness: 360, type: 'spring' as const };\n\nconst SwitchContext = createContext<SwitchContextType | null>(null);\n\nexport const useSwitchContext = () => {\n const context = use(SwitchContext);\n if (!context) {\n throw new Error('useSwitchContext must be used within a SwitchRoot');\n }\n return context;\n};\n\ntype SwitchRootInternalProps = Omit<SwitchRootProps, 'onCheckedChange' | 'onClick'> & {\n onCheckedChange?: SwitchChangeEventHandler;\n onClick?: SwitchChangeEventHandler;\n};\n\nexport const SwitchRoot = ({\n checked,\n className,\n defaultChecked,\n onCheckedChange,\n onClick,\n onKeyDown,\n onKeyUp,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp,\n size = 'default',\n children,\n disabled,\n readOnly,\n required,\n inputRef,\n id,\n name,\n style,\n ...rest\n}: SwitchRootInternalProps) => {\n const [isPressed, setIsPressed] = useState(false);\n const lastEventRef = useRef<MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>>(\n null,\n );\n\n const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {\n defaultValue: defaultChecked,\n onChange: (value: boolean) => {\n if (lastEventRef.current) {\n onCheckedChange?.(value, lastEventRef.current);\n }\n },\n value: checked,\n });\n\n const contextValue = useMemo(\n () => ({\n isChecked: Boolean(isChecked),\n isPressed,\n setIsChecked: (value: boolean) => setIsChecked(value),\n setIsPressed,\n }),\n [isChecked, isPressed, setIsChecked],\n );\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n lastEventRef.current = event;\n onClick?.(!isChecked, event);\n };\n\n const isInteractive = !disabled && !readOnly;\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n lastEventRef.current = event;\n }\n if (event.key === ' ' && isInteractive) {\n setIsPressed(true);\n }\n onKeyDown?.(event);\n };\n\n const handleKeyUp = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === ' ') {\n setIsPressed(false);\n }\n onKeyUp?.(event);\n };\n\n const handlePointerDown = (event: PointerEvent<HTMLButtonElement>) => {\n if (isInteractive) {\n setIsPressed(true);\n }\n onPointerDown?.(event);\n };\n\n const handlePointerUp = (event: PointerEvent<HTMLButtonElement>) => {\n setIsPressed(false);\n onPointerUp?.(event);\n };\n\n const handlePointerCancel = (event: PointerEvent<HTMLButtonElement>) => {\n setIsPressed(false);\n onPointerCancel?.(event);\n };\n\n const handlePointerLeave = (event: PointerEvent<HTMLButtonElement>) => {\n setIsPressed(false);\n onPointerLeave?.(event);\n };\n\n return (\n <SwitchContext value={contextValue}>\n <Switch.Root\n nativeButton\n checked={isChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n id={id}\n inputRef={inputRef}\n name={name}\n readOnly={readOnly}\n required={required}\n render={\n <button\n {...rest}\n {...styleProps(\n [switchMarker, focusRing.info, styles.root, rootSizeStyles[size]],\n clsx('lobe-switch', className),\n style,\n )}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n onPointerCancel={handlePointerCancel}\n onPointerDown={handlePointerDown}\n onPointerLeave={handlePointerLeave}\n onPointerUp={handlePointerUp}\n />\n }\n onCheckedChange={setIsChecked}\n >\n {children}\n </Switch.Root>\n </SwitchContext>\n );\n};\n\nSwitchRoot.displayName = 'SwitchRoot';\n\nexport const SwitchThumb = ({\n className,\n size = 'default',\n style,\n children,\n ...rest\n}: SwitchThumbProps) => {\n const { isChecked, isPressed } = useSwitchContext();\n const ref = useRef<HTMLSpanElement>(null);\n\n const metrics = THUMB_METRICS[size];\n const targetX = isChecked ? (isPressed ? metrics.pressedCheckedX : metrics.checkedX) : 0;\n const targetWidth = isPressed ? metrics.pressedWidth : metrics.width;\n\n const [values] = useState(() => ({\n width: motionValue(targetWidth),\n x: motionValue(targetX),\n }));\n\n // animated keys stay referentially stable so React never rewrites mid-flight inline values\n const [initialStyle] = useState<CSSProperties>(\n () => ({ '--switch-x': `${targetX}px`, 'width': targetWidth }) as CSSProperties,\n );\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n const unsubscribeX = values.x.on('change', (x) => {\n el.style.setProperty('--switch-x', `${x}px`);\n });\n const unsubscribeWidth = values.width.on('change', (width) => {\n el.style.setProperty('width', `${width}px`);\n });\n return () => {\n unsubscribeX();\n unsubscribeWidth();\n };\n }, [values]);\n\n useEffect(() => {\n const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n const transition = reduceMotion ? { duration: 0 } : THUMB_SPRING;\n const animations = [\n animate(values.x, targetX, transition),\n animate(values.width, targetWidth, transition),\n ];\n return () => {\n for (const animation of animations) animation.stop();\n };\n }, [values, targetX, targetWidth]);\n\n return (\n <Switch.Thumb\n render={\n <span\n {...rest}\n ref={ref}\n {...styleProps([styles.thumb, thumbSizeStyles[size]], className, {\n ...initialStyle,\n ...style,\n })}\n >\n {children}\n </span>\n }\n />\n );\n};\n\nSwitchThumb.displayName = 'SwitchThumb';\n\nconst iconPositionStyles: Record<SwitchIconPosition, stylex.StyleXStyles> = {\n left: styles.iconLeft,\n right: styles.iconRight,\n thumb: styles.iconThumb,\n};\n\nexport const SwitchIcon = ({\n children,\n className,\n position,\n size: _size,\n style,\n ...rest\n}: SwitchIconProps) => {\n return (\n <span {...styleProps([styles.icon, iconPositionStyles[position]], className, style)} {...rest}>\n {children}\n </span>\n );\n};\n\nSwitchIcon.displayName = 'SwitchIcon';\n\nconst switchClassNames = Object.fromEntries(\n Object.entries(styles).map(([key, value]) => [key, stylex.props(value).className ?? '']),\n) as Record<keyof typeof styles, string>;\n\nexport const switchStyles = {\n ...switchClassNames,\n iconLeftSmall: switchClassNames.iconLeft,\n iconRightSmall: switchClassNames.iconRight,\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":[],"sources":["../../src/Switch/atoms.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { Switch } from '@base-ui/react/switch';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { animate, motionValue } from 'motion';\nimport type { CSSProperties, KeyboardEvent, MouseEvent, PointerEvent } from 'react';\nimport { createContext, use, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { switchMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type {\n SwitchChangeEventHandler,\n SwitchContextType,\n SwitchIconPosition,\n SwitchIconProps,\n SwitchRootProps,\n SwitchSize,\n SwitchThumbProps,\n} from './type';\n\nconst THUMB_METRICS: Record<\n SwitchSize,\n { checkedX: number; pressedCheckedX: number; pressedWidth: number; width: number }\n> = {\n default: { checkedX: 14, pressedCheckedX: 10, pressedWidth: 22, width: 18 },\n small: { checkedX: 12, pressedCheckedX: 8, pressedWidth: 16, width: 12 },\n};\n\nconst rootSizeStyles = { default: styles.rootDefault, small: styles.rootSmall };\nconst thumbSizeStyles = { default: styles.thumbDefault, small: styles.thumbSmall };\n\nconst THUMB_SPRING = { damping: 24, stiffness: 360, type: 'spring' as const };\n\nconst SwitchContext = createContext<SwitchContextType | null>(null);\n\nexport const useSwitchContext = () => {\n const context = use(SwitchContext);\n if (!context) {\n throw new Error('useSwitchContext must be used within a SwitchRoot');\n }\n return context;\n};\n\ntype SwitchRootInternalProps = Omit<SwitchRootProps, 'onCheckedChange' | 'onClick'> & {\n onCheckedChange?: SwitchChangeEventHandler;\n onClick?: SwitchChangeEventHandler;\n};\n\nexport const SwitchRoot = ({\n checked,\n className,\n defaultChecked,\n onCheckedChange,\n onClick,\n onKeyDown,\n onKeyUp,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp,\n size = 'default',\n children,\n disabled,\n readOnly,\n required,\n inputRef,\n id,\n name,\n style,\n ...rest\n}: SwitchRootInternalProps) => {\n const [isPressed, setIsPressed] = useState(false);\n const lastEventRef = useRef<MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>>(\n null,\n );\n\n const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {\n defaultValue: defaultChecked,\n onChange: (value: boolean) => {\n if (lastEventRef.current) {\n onCheckedChange?.(value, lastEventRef.current);\n }\n },\n value: checked,\n });\n\n const contextValue = useMemo(\n () => ({\n isChecked: Boolean(isChecked),\n isPressed,\n setIsChecked: (value: boolean) => setIsChecked(value),\n setIsPressed,\n }),\n [isChecked, isPressed, setIsChecked],\n );\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n lastEventRef.current = event;\n onClick?.(!isChecked, event);\n };\n\n const isInteractive = !disabled && !readOnly;\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n lastEventRef.current = event;\n }\n if (event.key === ' ' && isInteractive) {\n setIsPressed(true);\n }\n onKeyDown?.(event);\n };\n\n const handleKeyUp = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === ' ') {\n setIsPressed(false);\n }\n onKeyUp?.(event);\n };\n\n const handlePointerDown = (event: PointerEvent<HTMLButtonElement>) => {\n if (isInteractive) {\n setIsPressed(true);\n }\n onPointerDown?.(event);\n };\n\n const handlePointerUp = (event: PointerEvent<HTMLButtonElement>) => {\n setIsPressed(false);\n onPointerUp?.(event);\n };\n\n const handlePointerCancel = (event: PointerEvent<HTMLButtonElement>) => {\n setIsPressed(false);\n onPointerCancel?.(event);\n };\n\n const handlePointerLeave = (event: PointerEvent<HTMLButtonElement>) => {\n setIsPressed(false);\n onPointerLeave?.(event);\n };\n\n return (\n <SwitchContext value={contextValue}>\n <Switch.Root\n nativeButton\n checked={isChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n id={id}\n inputRef={inputRef}\n name={name}\n readOnly={readOnly}\n required={required}\n render={\n <button\n {...rest}\n {...styleProps(\n [switchMarker, focusRing.info, styles.root, rootSizeStyles[size]],\n clsx('lobe-switch', className),\n style,\n )}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n onPointerCancel={handlePointerCancel}\n onPointerDown={handlePointerDown}\n onPointerLeave={handlePointerLeave}\n onPointerUp={handlePointerUp}\n />\n }\n onCheckedChange={setIsChecked}\n >\n {children}\n </Switch.Root>\n </SwitchContext>\n );\n};\n\nSwitchRoot.displayName = 'SwitchRoot';\n\nexport const SwitchThumb = ({\n className,\n size = 'default',\n style,\n children,\n ...rest\n}: SwitchThumbProps) => {\n const { isChecked, isPressed } = useSwitchContext();\n const ref = useRef<HTMLSpanElement>(null);\n\n const metrics = THUMB_METRICS[size];\n const targetX = isChecked ? (isPressed ? metrics.pressedCheckedX : metrics.checkedX) : 0;\n const targetWidth = isPressed ? metrics.pressedWidth : metrics.width;\n\n const [values] = useState(() => ({\n width: motionValue(targetWidth),\n x: motionValue(targetX),\n }));\n\n // animated keys stay referentially stable so React never rewrites mid-flight inline values\n const [initialStyle] = useState<CSSProperties>(\n () => ({ '--switch-x': `${targetX}px`, 'width': targetWidth }) as CSSProperties,\n );\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n const unsubscribeX = values.x.on('change', (x) => {\n el.style.setProperty('--switch-x', `${x}px`);\n });\n const unsubscribeWidth = values.width.on('change', (width) => {\n el.style.setProperty('width', `${width}px`);\n });\n return () => {\n unsubscribeX();\n unsubscribeWidth();\n };\n }, [values]);\n\n useEffect(() => {\n const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n const transition = reduceMotion ? { duration: 0 } : THUMB_SPRING;\n const animations = [\n animate(values.x, targetX, transition),\n animate(values.width, targetWidth, transition),\n ];\n return () => {\n for (const animation of animations) animation.stop();\n };\n }, [values, targetX, targetWidth]);\n\n return (\n <Switch.Thumb\n render={\n <span\n {...rest}\n ref={ref}\n {...styleProps([styles.thumb, thumbSizeStyles[size]], className, {\n ...initialStyle,\n ...style,\n })}\n >\n {children}\n </span>\n }\n />\n );\n};\n\nSwitchThumb.displayName = 'SwitchThumb';\n\nconst iconPositionStyles: Record<SwitchIconPosition, stylex.StyleXStyles> = {\n left: styles.iconLeft,\n right: styles.iconRight,\n thumb: styles.iconThumb,\n};\n\nexport const SwitchIcon = ({\n children,\n className,\n position,\n size: _size,\n style,\n ...rest\n}: SwitchIconProps) => {\n return (\n <span {...styleProps([styles.icon, iconPositionStyles[position]], className, style)} {...rest}>\n {children}\n </span>\n );\n};\n\nSwitchIcon.displayName = 'SwitchIcon';\n\nconst switchClassNames = Object.fromEntries(\n Object.entries(styles).map(([key, value]) => [key, stylex.props(value).className ?? '']),\n) as Record<keyof typeof styles, string>;\n\nexport const switchStyles = {\n ...switchClassNames,\n iconLeftSmall: switchClassNames.iconLeft,\n iconRightSmall: switchClassNames.iconRight,\n};\n"],"mappings":"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"}
|
package/es/Tabs/Tabs.mjs
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { styleProps } from "../styles/stylex/props.mjs";
|
|
3
|
+
import { useControlledState } from "../hooks/useControlledState.mjs";
|
|
3
4
|
import { styles } from "./style.mjs";
|
|
4
5
|
import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab } from "./atoms.mjs";
|
|
6
|
+
import { useMemo } from "react";
|
|
5
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
8
|
import clsx from "clsx";
|
|
7
|
-
import useControlledState from "use-merge-value";
|
|
8
9
|
//#region src/Tabs/Tabs.tsx
|
|
9
10
|
const Tabs = ({ activeKey, className, classNames, defaultActiveKey, items, onChange, orientation = "horizontal", ref, size = "middle", style, styles: customStyles, variant = "rounded" }) => {
|
|
10
11
|
const initialActiveKey = defaultActiveKey ?? items?.find((item) => !item.disabled)?.key ?? null;
|
|
@@ -15,7 +16,38 @@ const Tabs = ({ activeKey, className, classNames, defaultActiveKey, items, onCha
|
|
|
15
16
|
},
|
|
16
17
|
value: activeKey
|
|
17
18
|
});
|
|
18
|
-
const
|
|
19
|
+
const list = useMemo(() => /* @__PURE__ */ jsxs(TabsList, {
|
|
20
|
+
className: classNames?.list,
|
|
21
|
+
style: customStyles?.list,
|
|
22
|
+
children: [/* @__PURE__ */ jsx(TabsIndicator, {
|
|
23
|
+
className: classNames?.indicator,
|
|
24
|
+
style: customStyles?.indicator
|
|
25
|
+
}), items?.map((item) => /* @__PURE__ */ jsxs(TabsTab, {
|
|
26
|
+
className: classNames?.tab,
|
|
27
|
+
disabled: item.disabled,
|
|
28
|
+
style: customStyles?.tab,
|
|
29
|
+
value: item.key,
|
|
30
|
+
children: [item.icon, item.label]
|
|
31
|
+
}, item.key))]
|
|
32
|
+
}), [
|
|
33
|
+
classNames?.indicator,
|
|
34
|
+
classNames?.list,
|
|
35
|
+
classNames?.tab,
|
|
36
|
+
customStyles?.indicator,
|
|
37
|
+
customStyles?.list,
|
|
38
|
+
customStyles?.tab,
|
|
39
|
+
items
|
|
40
|
+
]);
|
|
41
|
+
const panels = useMemo(() => items?.some((item) => item.children != null) ? items.map((item) => /* @__PURE__ */ jsx(TabsPanel, {
|
|
42
|
+
className: classNames?.panel,
|
|
43
|
+
style: customStyles?.panel,
|
|
44
|
+
value: item.key,
|
|
45
|
+
children: item.children
|
|
46
|
+
}, item.key)) : null, [
|
|
47
|
+
classNames?.panel,
|
|
48
|
+
customStyles?.panel,
|
|
49
|
+
items
|
|
50
|
+
]);
|
|
19
51
|
return /* @__PURE__ */ jsxs(TabsRoot, {
|
|
20
52
|
...styleProps(styles.root, clsx(classNames?.root, className), {
|
|
21
53
|
...style,
|
|
@@ -27,25 +59,7 @@ const Tabs = ({ activeKey, className, classNames, defaultActiveKey, items, onCha
|
|
|
27
59
|
value,
|
|
28
60
|
variant,
|
|
29
61
|
onValueChange: (next) => setValue(next ?? null),
|
|
30
|
-
children: [
|
|
31
|
-
className: classNames?.list,
|
|
32
|
-
style: customStyles?.list,
|
|
33
|
-
children: [/* @__PURE__ */ jsx(TabsIndicator, {
|
|
34
|
-
className: classNames?.indicator,
|
|
35
|
-
style: customStyles?.indicator
|
|
36
|
-
}), items?.map((item) => /* @__PURE__ */ jsxs(TabsTab, {
|
|
37
|
-
className: classNames?.tab,
|
|
38
|
-
disabled: item.disabled,
|
|
39
|
-
style: customStyles?.tab,
|
|
40
|
-
value: item.key,
|
|
41
|
-
children: [item.icon, item.label]
|
|
42
|
-
}, item.key))]
|
|
43
|
-
}), hasPanels && items?.map((item) => /* @__PURE__ */ jsx(TabsPanel, {
|
|
44
|
-
className: classNames?.panel,
|
|
45
|
-
style: customStyles?.panel,
|
|
46
|
-
value: item.key,
|
|
47
|
-
children: item.children
|
|
48
|
-
}, item.key))]
|
|
62
|
+
children: [list, panels]
|
|
49
63
|
});
|
|
50
64
|
};
|
|
51
65
|
Tabs.displayName = "Tabs";
|
package/es/Tabs/Tabs.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.mjs","names":[],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type FC } from 'react';\nimport useControlledState from '
|
|
1
|
+
{"version":3,"file":"Tabs.mjs","names":[],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type FC, useMemo } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab } from './atoms';\nimport { styles } from './style';\nimport type { TabsProps } from './type';\n\nconst Tabs: FC<TabsProps> = ({\n activeKey,\n className,\n classNames,\n defaultActiveKey,\n items,\n onChange,\n orientation = 'horizontal',\n ref,\n size = 'middle',\n style,\n styles: customStyles,\n variant = 'rounded',\n}) => {\n const initialActiveKey = defaultActiveKey ?? items?.find((item) => !item.disabled)?.key ?? null;\n const [value, setValue] = useControlledState<string | null>(initialActiveKey, {\n defaultValue: initialActiveKey,\n onChange: (next) => {\n if (next != null) onChange?.(next);\n },\n value: activeKey,\n });\n\n const list = useMemo(\n () => (\n <TabsList className={classNames?.list} style={customStyles?.list}>\n <TabsIndicator className={classNames?.indicator} style={customStyles?.indicator} />\n {items?.map((item) => (\n <TabsTab\n className={classNames?.tab}\n disabled={item.disabled}\n key={item.key}\n style={customStyles?.tab}\n value={item.key}\n >\n {item.icon}\n {item.label}\n </TabsTab>\n ))}\n </TabsList>\n ),\n [\n classNames?.indicator,\n classNames?.list,\n classNames?.tab,\n customStyles?.indicator,\n customStyles?.list,\n customStyles?.tab,\n items,\n ],\n );\n\n const panels = useMemo(\n () =>\n items?.some((item) => item.children != null)\n ? items.map((item) => (\n <TabsPanel\n className={classNames?.panel}\n key={item.key}\n style={customStyles?.panel}\n value={item.key}\n >\n {item.children}\n </TabsPanel>\n ))\n : null,\n [classNames?.panel, customStyles?.panel, items],\n );\n\n return (\n <TabsRoot\n {...styleProps(styles.root, clsx(classNames?.root, className), {\n ...style,\n ...customStyles?.root,\n })}\n orientation={orientation}\n ref={ref}\n size={size}\n value={value}\n variant={variant}\n onValueChange={(next) => setValue(next ?? null)}\n >\n {list}\n {panels}\n </TabsRoot>\n );\n};\n\nTabs.displayName = 'Tabs';\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;AAYA,MAAM,QAAuB,EAC3B,WACA,WACA,YACA,kBACA,OACA,UACA,cAAc,cACd,KACA,OAAO,UACP,OACA,QAAQ,cACR,UAAU,gBACN;CACJ,MAAM,mBAAmB,oBAAoB,OAAO,MAAM,SAAS,CAAC,KAAK,QAAQ,CAAC,EAAE,OAAO;CAC3F,MAAM,CAAC,OAAO,YAAY,mBAAkC,kBAAkB;EAC5E,cAAc;EACd,WAAW,SAAS;GAClB,IAAI,QAAQ,MAAM,WAAW,IAAI;EACnC;EACA,OAAO;CACT,CAAC;CAED,MAAM,OAAO,cAET,qBAAC,UAAD;EAAU,WAAW,YAAY;EAAM,OAAO,cAAc;EAA5D,UAAA,CACE,oBAAC,eAAD;GAAe,WAAW,YAAY;GAAW,OAAO,cAAc;EAAY,CAAA,GACjF,OAAO,KAAK,SACX,qBAAC,SAAD;GACE,WAAW,YAAY;GACvB,UAAU,KAAK;GAEf,OAAO,cAAc;GACrB,OAAO,KAAK;GALd,UAAA,CAOG,KAAK,MACL,KAAK,KACC;EANF,GAAA,KAAK,GAMH,CACV,CACO;CAEZ,CAAA,GAAA;EACE,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,cAAc;EACd,cAAc;EACd,cAAc;EACd;CACF,CACF;CAEA,MAAM,SAAS,cAEX,OAAO,MAAM,SAAS,KAAK,YAAY,IAAI,IACvC,MAAM,KAAK,SACT,oBAAC,WAAD;EACE,WAAW,YAAY;EAEvB,OAAO,cAAc;EACrB,OAAO,KAAK;EAEX,UAAA,KAAK;CACG,GALJ,KAAK,GAKD,CACZ,IACD,MACN;EAAC,YAAY;EAAO,cAAc;EAAO;CAAK,CAChD;CAEA,OACE,qBAAC,UAAD;EACE,GAAI,WAAW,OAAO,MAAM,KAAK,YAAY,MAAM,SAAS,GAAG;GAC7D,GAAG;GACH,GAAG,cAAc;EACnB,CAAC;EACY;EACR;EACC;EACC;EACE;EACT,gBAAgB,SAAS,SAAS,QAAQ,IAAI;EAVhD,UAAA,CAYG,MACA,MACO;;AAEd;AAEA,KAAK,cAAc"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { useControlledState } from "../hooks/useControlledState.mjs";
|
|
2
3
|
import { ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupRoot } from "./atoms.mjs";
|
|
3
4
|
import { useMemo } from "react";
|
|
4
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
6
|
import clsx from "clsx";
|
|
6
|
-
import useControlledState from "use-merge-value";
|
|
7
7
|
//#region src/ToggleGroup/ToggleGroup.tsx
|
|
8
8
|
const normalizeOption = (option) => typeof option === "string" ? { value: option } : option;
|
|
9
9
|
const ToggleGroup = ({ className, classNames, defaultValue, disabled = false, onChange, options, ref, size = "middle", style, styles: customStyles, value, variant = "outlined" }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleGroup.mjs","names":[],"sources":["../../src/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useMemo } from 'react';\nimport useControlledState from '
|
|
1
|
+
{"version":3,"file":"ToggleGroup.mjs","names":[],"sources":["../../src/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useMemo } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\n\nimport {\n ToggleGroupItem,\n ToggleGroupItemIcon,\n ToggleGroupItemLabel,\n ToggleGroupRoot,\n} from './atoms';\nimport type { ToggleGroupOption, ToggleGroupProps } from './type';\n\nconst normalizeOption = <Value extends string>(\n option: ToggleGroupOption<Value> | Value,\n): ToggleGroupOption<Value> => (typeof option === 'string' ? { value: option } : option);\n\nconst ToggleGroup = <Value extends string = string>({\n className,\n classNames,\n defaultValue,\n disabled = false,\n onChange,\n options,\n ref,\n size = 'middle',\n style,\n styles: customStyles,\n value,\n variant = 'outlined',\n}: ToggleGroupProps<Value>) => {\n const [innerValue, setInnerValue] = useControlledState<Value | undefined>(defaultValue, {\n defaultValue,\n onChange: (next) => {\n if (next != null) onChange?.(next);\n },\n value,\n });\n\n const normalizedOptions = useMemo(\n () => (options ?? []).map((o) => normalizeOption<Value>(o)),\n [options],\n );\n\n const groupValue = useMemo<Value[]>(() => (innerValue != null ? [innerValue] : []), [innerValue]);\n\n return (\n <ToggleGroupRoot<Value>\n className={clsx(classNames?.root, className)}\n disabled={disabled}\n ref={ref}\n style={{ ...style, ...customStyles?.root }}\n value={groupValue}\n variant={variant}\n onValueChange={(next) => {\n const picked = next[0];\n if (picked != null) setInnerValue(picked);\n }}\n >\n {normalizedOptions.map((opt) => (\n <ToggleGroupItem<Value>\n aria-label={typeof opt.label === 'string' ? opt.label : opt.title}\n className={clsx(classNames?.item, opt.className)}\n disabled={disabled || opt.disabled}\n key={opt.value}\n size={size}\n style={customStyles?.item}\n title={opt.title}\n value={opt.value}\n variant={variant}\n >\n {opt.icon != null && (\n <ToggleGroupItemIcon className={classNames?.itemIcon} style={customStyles?.itemIcon}>\n {opt.icon}\n </ToggleGroupItemIcon>\n )}\n {opt.label != null && (\n <ToggleGroupItemLabel className={classNames?.itemLabel} style={customStyles?.itemLabel}>\n {opt.label}\n </ToggleGroupItemLabel>\n )}\n </ToggleGroupItem>\n ))}\n </ToggleGroupRoot>\n );\n};\n\nToggleGroup.displayName = 'ToggleGroup';\n\nexport default ToggleGroup;\n"],"mappings":";;;;;;;AAeA,MAAM,mBACJ,WAC8B,OAAO,WAAW,WAAW,EAAE,OAAO,OAAO,IAAI;AAEjF,MAAM,eAA8C,EAClD,WACA,YACA,cACA,WAAW,OACX,UACA,SACA,KACA,OAAO,UACP,OACA,QAAQ,cACR,OACA,UAAU,iBACmB;CAC7B,MAAM,CAAC,YAAY,iBAAiB,mBAAsC,cAAc;EACtF;EACA,WAAW,SAAS;GAClB,IAAI,QAAQ,MAAM,WAAW,IAAI;EACnC;EACA;CACF,CAAC;CAED,MAAM,oBAAoB,eACjB,WAAW,CAAC,EAAA,CAAG,KAAK,MAAM,gBAAuB,CAAC,CAAC,GAC1D,CAAC,OAAO,CACV;CAEA,MAAM,aAAa,cAAwB,cAAc,OAAO,CAAC,UAAU,IAAI,CAAC,GAAI,CAAC,UAAU,CAAC;CAEhG,OACE,oBAAC,iBAAD;EACE,WAAW,KAAK,YAAY,MAAM,SAAS;EACjC;EACL;EACL,OAAO;GAAE,GAAG;GAAO,GAAG,cAAc;EAAK;EACzC,OAAO;EACE;EACT,gBAAgB,SAAS;GACvB,MAAM,SAAS,KAAK;GACpB,IAAI,UAAU,MAAM,cAAc,MAAM;EAC1C;EAEC,UAAA,kBAAkB,KAAK,QACtB,qBAAC,iBAAD;GACE,cAAY,OAAO,IAAI,UAAU,WAAW,IAAI,QAAQ,IAAI;GAC5D,WAAW,KAAK,YAAY,MAAM,IAAI,SAAS;GAC/C,UAAU,YAAY,IAAI;GAEpB;GACN,OAAO,cAAc;GACrB,OAAO,IAAI;GACX,OAAO,IAAI;GACF;GATX,UAAA,CAWG,IAAI,QAAQ,QACX,oBAAC,qBAAD;IAAqB,WAAW,YAAY;IAAU,OAAO,cAAc;IACxE,UAAA,IAAI;GACc,CAAA,GAEtB,IAAI,SAAS,QACZ,oBAAC,sBAAD;IAAsB,WAAW,YAAY;IAAW,OAAO,cAAc;IAC1E,UAAA,IAAI;GACe,CAAA,CAET;EAjBV,GAAA,IAAI,KAiBM,CAClB;CACc,CAAA;AAErB;AAEA,YAAY,cAAc"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { TooltipGroupHandleContext } from "./groupContext.mjs";
|
|
3
3
|
import { useNativeButton } from "../hooks/useNativeButton.mjs";
|
|
4
|
+
import { mergeRefs } from "../utils/mergeRefs.mjs";
|
|
4
5
|
import { useMergedTooltipProps } from "./useMergedTooltipProps.mjs";
|
|
5
6
|
import { cloneElement, isValidElement, use, useCallback, useMemo } from "react";
|
|
6
7
|
import { jsx } from "react/jsx-runtime";
|
|
7
8
|
import { mergeProps } from "@base-ui/react/merge-props";
|
|
8
9
|
import { Tooltip } from "@base-ui/react/tooltip";
|
|
9
|
-
import { mergeRefs } from "react-merge-refs";
|
|
10
10
|
//#region src/Tooltip/TooltipInGroup.tsx
|
|
11
11
|
const DEFAULT_OPEN_DELAY = 400;
|
|
12
12
|
const DEFAULT_CLOSE_DELAY = 100;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipInGroup.mjs","names":["BaseTooltip"],"sources":["../../src/Tooltip/TooltipInGroup.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { cloneElement, type FC, isValidElement, use, useCallback, useMemo } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"TooltipInGroup.mjs","names":["BaseTooltip"],"sources":["../../src/Tooltip/TooltipInGroup.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { cloneElement, type FC, isValidElement, use, useCallback, useMemo } from 'react';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport { TooltipGroupHandleContext } from './groupContext';\nimport { type TooltipProps } from './type';\nimport { useMergedTooltipProps } from './useMergedTooltipProps';\n\nconst DEFAULT_OPEN_DELAY = 400;\nconst DEFAULT_CLOSE_DELAY = 100;\n\nexport const TooltipInGroup: FC<TooltipProps> = ({\n children,\n ref: refProp,\n arrow,\n className,\n classNames,\n closeDelay,\n defaultOpen,\n disabled: disabledProp,\n getPopupContainer,\n hotkey,\n hotkeyProps,\n mouseEnterDelay,\n mouseLeaveDelay,\n onOpenChange,\n open,\n openDelay,\n placement,\n popupContainer,\n popupProps,\n portalProps,\n positionerProps,\n standalone: _standalone,\n styles,\n title,\n triggerProps: triggerPropsProp,\n zIndex,\n ...restProps\n}) => {\n const tooltipProps = useMemo(\n () => ({\n arrow,\n className,\n classNames,\n closeDelay,\n defaultOpen,\n disabled: disabledProp,\n getPopupContainer,\n hotkey,\n hotkeyProps,\n mouseEnterDelay,\n mouseLeaveDelay,\n onOpenChange,\n open,\n openDelay,\n placement,\n popupContainer,\n popupProps,\n portalProps,\n positionerProps,\n styles,\n title,\n triggerProps: triggerPropsProp,\n zIndex,\n }),\n [\n arrow,\n className,\n classNames,\n closeDelay,\n defaultOpen,\n disabledProp,\n getPopupContainer,\n hotkey,\n hotkeyProps,\n mouseEnterDelay,\n mouseLeaveDelay,\n onOpenChange,\n open,\n openDelay,\n placement,\n popupContainer,\n popupProps,\n portalProps,\n positionerProps,\n styles,\n title,\n triggerPropsProp,\n zIndex,\n ],\n );\n\n const group = use(TooltipGroupHandleContext);\n const item = useMergedTooltipProps(tooltipProps);\n\n const resolvedOpenDelay = useMemo(() => {\n if (item.openDelay !== undefined) return item.openDelay;\n if (item.mouseEnterDelay !== undefined) return item.mouseEnterDelay * 1000;\n return DEFAULT_OPEN_DELAY;\n }, [item.mouseEnterDelay, item.openDelay]);\n\n const resolvedCloseDelay = useMemo(() => {\n if (item.closeDelay !== undefined) return item.closeDelay;\n if (item.mouseLeaveDelay !== undefined) return item.mouseLeaveDelay * 1000;\n return DEFAULT_CLOSE_DELAY;\n }, [item.closeDelay, item.mouseLeaveDelay]);\n\n const disabled = Boolean(item.disabled);\n\n const { isNativeButtonTriggerElement } = useNativeButton({\n children,\n });\n\n const childElement = isValidElement(children) ? children : null;\n const popupTriggerId =\n childElement &&\n (childElement as any).props['aria-haspopup'] !== undefined &&\n (childElement as any).props.id !== undefined\n ? (childElement as any).props.id\n : undefined;\n\n const renderTrigger = useCallback(\n (renderProps: unknown) => {\n // Base UI's trigger props include `type=\"button\"` by default.\n // If we render into a non-<button> element, that prop is invalid and can warn.\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return renderProps as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ref: triggerRef, ...triggerRest } = renderProps as any;\n return triggerRest;\n })();\n\n const childProps = (childElement as any).props;\n const mergedProps = mergeProps(restProps, childProps, resolvedProps);\n const shouldPreservePopupTriggerId =\n childProps['aria-haspopup'] !== undefined && childProps.id !== undefined;\n\n return cloneElement(childElement as any, {\n ...mergedProps,\n id: shouldPreservePopupTriggerId ? childProps.id : mergedProps.id,\n ref: mergeRefs([(childElement as any).ref, (renderProps as any).ref, refProp]),\n });\n },\n [childElement, isNativeButtonTriggerElement, refProp, restProps],\n );\n\n // Don't render trigger behavior if no content\n\n if (item.title == null && !item.hotkey) {\n return children as any;\n }\n\n const triggerProps = {\n closeDelay: resolvedCloseDelay,\n delay: resolvedOpenDelay,\n disabled,\n ...item.triggerProps,\n id: popupTriggerId ?? item.triggerProps?.id,\n payload: item,\n };\n\n if (childElement) {\n return (\n <BaseTooltip.Trigger handle={group ?? undefined} {...triggerProps} render={renderTrigger} />\n );\n }\n\n return (\n <BaseTooltip.Trigger handle={group ?? undefined} {...triggerProps} ref={refProp}>\n {children}\n </BaseTooltip.Trigger>\n );\n};\n\nTooltipInGroup.displayName = 'TooltipInGroup';\n"],"mappings":";;;;;;;;;;AAaA,MAAM,qBAAqB;AAC3B,MAAM,sBAAsB;AAE5B,MAAa,kBAAoC,EAC/C,UACA,KAAK,SACL,OACA,WACA,YACA,YACA,aACA,UAAU,cACV,mBACA,QACA,aACA,iBACA,iBACA,cACA,MACA,WACA,WACA,gBACA,YACA,aACA,iBACA,YAAY,aACZ,QACA,OACA,cAAc,kBACd,QACA,GAAG,gBACC;CACJ,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA,UAAU;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,QAAQ,IAAI,yBAAyB;CAC3C,MAAM,OAAO,sBAAsB,YAAY;CAE/C,MAAM,oBAAoB,cAAc;EACtC,IAAI,KAAK,cAAc,KAAA,GAAW,OAAO,KAAK;EAC9C,IAAI,KAAK,oBAAoB,KAAA,GAAW,OAAO,KAAK,kBAAkB;EACtE,OAAO;CACT,GAAG,CAAC,KAAK,iBAAiB,KAAK,SAAS,CAAC;CAEzC,MAAM,qBAAqB,cAAc;EACvC,IAAI,KAAK,eAAe,KAAA,GAAW,OAAO,KAAK;EAC/C,IAAI,KAAK,oBAAoB,KAAA,GAAW,OAAO,KAAK,kBAAkB;EACtE,OAAO;CACT,GAAG,CAAC,KAAK,YAAY,KAAK,eAAe,CAAC;CAE1C,MAAM,WAAW,QAAQ,KAAK,QAAQ;CAEtC,MAAM,EAAE,iCAAiC,gBAAgB,EACvD,SACF,CAAC;CAED,MAAM,eAAe,eAAe,QAAQ,IAAI,WAAW;CAC3D,MAAM,iBACJ,gBACC,aAAqB,MAAM,qBAAqB,KAAA,KAChD,aAAqB,MAAM,OAAO,KAAA,IAC9B,aAAqB,MAAM,KAC5B,KAAA;CAEN,MAAM,gBAAgB,aACnB,gBAAyB;EAGxB,MAAM,uBAAuB;GAC3B,IAAI,8BAA8B,OAAO;GAEzC,MAAM,EAAE,MAAM,KAAK,YAAY,GAAG,gBAAgB;GAClD,OAAO;EACT,EAAA,CAAG;EAEH,MAAM,aAAc,aAAqB;EACzC,MAAM,cAAc,WAAW,WAAW,YAAY,aAAa;EACnE,MAAM,+BACJ,WAAW,qBAAqB,KAAA,KAAa,WAAW,OAAO,KAAA;EAEjE,OAAO,aAAa,cAAqB;GACvC,GAAG;GACH,IAAI,+BAA+B,WAAW,KAAK,YAAY;GAC/D,KAAK,UAAU;IAAE,aAAqB;IAAM,YAAoB;IAAK;GAAO,CAAC;EAC/E,CAAC;CACH,GACA;EAAC;EAAc;EAA8B;EAAS;CAAS,CACjE;CAIA,IAAI,KAAK,SAAS,QAAQ,CAAC,KAAK,QAC9B,OAAO;CAGT,MAAM,eAAe;EACnB,YAAY;EACZ,OAAO;EACP;EACA,GAAG,KAAK;EACR,IAAI,kBAAkB,KAAK,cAAc;EACzC,SAAS;CACX;CAEA,IAAI,cACF,OACE,oBAACA,QAAY,SAAb;EAAqB,QAAQ,SAAS,KAAA;EAAW,GAAI;EAAc,QAAQ;CAAgB,CAAA;CAI/F,OACE,oBAACA,QAAY,SAAb;EAAqB,QAAQ,SAAS,KAAA;EAAW,GAAI;EAAc,KAAK;EACrE;CACkB,CAAA;AAEzB;AAEA,eAAe,cAAc"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { useAppElement } from "../ConfigProvider/AppElementContext.mjs";
|
|
3
3
|
import { styleProps } from "../styles/stylex/props.mjs";
|
|
4
4
|
import { useNativeButton } from "../hooks/useNativeButton.mjs";
|
|
5
|
+
import { mergeRefs } from "../utils/mergeRefs.mjs";
|
|
5
6
|
import { useFloatingLayer } from "../hooks/useFloatingLayer.mjs";
|
|
6
7
|
import { useIsClient } from "../hooks/useIsClient.mjs";
|
|
7
8
|
import { getFloatingCollisionPadding } from "../internal/floating/collisionPadding.mjs";
|
|
@@ -14,7 +15,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
14
15
|
import clsx from "clsx";
|
|
15
16
|
import { mergeProps } from "@base-ui/react/merge-props";
|
|
16
17
|
import { Tooltip } from "@base-ui/react/tooltip";
|
|
17
|
-
import { mergeRefs } from "react-merge-refs";
|
|
18
18
|
//#region src/Tooltip/TooltipStandalone.tsx
|
|
19
19
|
const DEFAULT_OPEN_DELAY = 400;
|
|
20
20
|
const DEFAULT_CLOSE_DELAY = 100;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipStandalone.mjs","names":["BaseTooltip"],"sources":["../../src/Tooltip/TooltipStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport clsx from 'clsx';\nimport {\n cloneElement,\n isValidElement,\n memo,\n type Ref,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useFloatingLayer } from '@/hooks/useFloatingLayer';\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { styleProps } from '@/styles/stylex/props';\nimport { placementMap } from '@/utils/placement';\n\nimport { TooltipArrowIcon } from './ArrowIcon';\nimport { styles } from './style';\nimport TooltipContent from './TooltipContent';\nimport { type TooltipProps } from './type';\n\nconst DEFAULT_OPEN_DELAY = 400;\nconst DEFAULT_CLOSE_DELAY = 100;\n\n/**\n * Tooltip component - displays small contextual hints on hover/focus\n * Compatible with Ant Design Tooltip-like API (subset)\n */\nexport const TooltipStandalone = memo<TooltipProps>(\n ({\n children,\n title,\n arrow = false,\n className,\n classNames,\n closeDelay,\n defaultOpen = false,\n disabled = false,\n getPopupContainer,\n hotkey,\n hotkeyProps,\n mouseEnterDelay,\n mouseLeaveDelay,\n onOpenChange,\n open,\n openDelay,\n placement = 'top',\n popupContainer,\n styles: customStylesProp,\n zIndex,\n ref: refProp,\n positionerProps,\n triggerProps,\n popupProps,\n portalProps,\n standalone: _standalone,\n ...restProps\n }) => {\n const isClient = useIsClient();\n const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n const [triggerNode, setTriggerNode] = useState<HTMLElement | null>(null);\n const triggerCallbackRef = useCallback((node: HTMLElement | null) => {\n if (node) setTriggerNode(node);\n }, []);\n\n const mergedOpen = open ?? uncontrolledOpen;\n const resolvedOpen = disabled ? false : mergedOpen;\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean) => {\n if (disabled && nextOpen) return;\n onOpenChange?.(nextOpen);\n if (open === undefined) {\n setUncontrolledOpen(nextOpen);\n }\n },\n [disabled, onOpenChange, open],\n );\n\n const resolvedOpenDelay = useMemo(() => {\n if (openDelay !== undefined) return openDelay;\n if (mouseEnterDelay !== undefined) return mouseEnterDelay * 1000;\n return DEFAULT_OPEN_DELAY;\n }, [mouseEnterDelay, openDelay]);\n\n const resolvedCloseDelay = useMemo(() => {\n if (closeDelay !== undefined) return closeDelay;\n if (mouseLeaveDelay !== undefined) return mouseLeaveDelay * 1000;\n return DEFAULT_CLOSE_DELAY;\n }, [closeDelay, mouseLeaveDelay]);\n\n const placementConfig = placementMap[placement] ?? placementMap.top;\n const baseSideOffset = arrow ? 8 : 6;\n\n const appElement = useAppElement();\n const floatingLayerContainer = useFloatingLayer();\n const portalContainer = floatingLayerContainer ?? appElement;\n\n const { isNativeButtonTriggerElement } = useNativeButton({\n children,\n });\n\n const slots = useMemo(() => {\n const customStyles = typeof customStylesProp === 'function' ? undefined : customStylesProp;\n return {\n arrow: styleProps(styles.arrow, classNames?.arrow, customStyles?.arrow),\n popup: styleProps(styles.popup, clsx(className, classNames?.root, classNames?.container), {\n ...customStyles?.root,\n ...customStyles?.container,\n }),\n positioner: styleProps(styles.positioner, undefined, { zIndex: zIndex ?? 114_514 }),\n viewport: styleProps(\n styles.viewport,\n clsx('lobe-tooltip-viewport', classNames?.content),\n customStyles?.content,\n ),\n };\n }, [\n className,\n classNames?.arrow,\n classNames?.container,\n classNames?.content,\n classNames?.root,\n customStylesProp,\n zIndex,\n ]);\n\n const triggerElement = useMemo(() => {\n const popupTriggerId =\n isValidElement(children) &&\n (children as any).props['aria-haspopup'] !== undefined &&\n (children as any).props.id !== undefined\n ? (children as any).props.id\n : undefined;\n\n const baseTriggerProps = {\n closeDelay: resolvedCloseDelay,\n delay: resolvedOpenDelay,\n disabled,\n ...triggerProps,\n id: popupTriggerId ?? triggerProps?.id,\n };\n\n if (isValidElement(children)) {\n return (\n <BaseTooltip.Trigger\n {...baseTriggerProps}\n render={(props) => {\n // Base UI's trigger props include `type=\"button\"` by default.\n // If we render into a non-<button> element, that prop is invalid and can warn.\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ref: triggerRef, ...triggerRest } = props as any;\n return triggerRest;\n })();\n\n const childProps = (children as any).props;\n const mergedProps = mergeProps(restProps, childProps, resolvedProps);\n const shouldPreservePopupTriggerId =\n childProps['aria-haspopup'] !== undefined && childProps.id !== undefined;\n\n return cloneElement(children as any, {\n ...mergedProps,\n id: shouldPreservePopupTriggerId ? childProps.id : mergedProps.id,\n ref: mergeRefs([\n (children as any).ref,\n (props as any).ref,\n refProp,\n triggerCallbackRef,\n ]),\n });\n }}\n />\n );\n }\n\n return (\n <BaseTooltip.Trigger\n {...baseTriggerProps}\n ref={mergeRefs([refProp, triggerCallbackRef]) as Ref<HTMLButtonElement>}\n >\n {children}\n </BaseTooltip.Trigger>\n );\n }, [\n children,\n disabled,\n isNativeButtonTriggerElement,\n refProp,\n resolvedCloseDelay,\n resolvedOpenDelay,\n restProps,\n triggerCallbackRef,\n triggerProps,\n ]);\n\n const customContainer = useMemo(() => {\n if (popupContainer) return popupContainer;\n if (!getPopupContainer || !isClient || !triggerNode) return undefined;\n return getPopupContainer(triggerNode);\n }, [popupContainer, getPopupContainer, isClient, triggerNode]);\n\n const popup = useMemo(\n () => (\n <BaseTooltip.Positioner\n align={placementConfig.align}\n data-placement={placement}\n side={placementConfig.side}\n sideOffset={baseSideOffset}\n {...slots.positioner}\n {...positionerProps}\n collisionPadding={positionerProps?.collisionPadding ?? getFloatingCollisionPadding()}\n >\n <BaseTooltip.Popup {...slots.popup} {...popupProps}>\n {arrow && <BaseTooltip.Arrow {...slots.arrow}>{TooltipArrowIcon}</BaseTooltip.Arrow>}\n <BaseTooltip.Viewport {...slots.viewport}>\n <TooltipContent hotkey={hotkey} hotkeyProps={hotkeyProps} title={title} />\n </BaseTooltip.Viewport>\n </BaseTooltip.Popup>\n </BaseTooltip.Positioner>\n ),\n [\n arrow,\n baseSideOffset,\n hotkey,\n hotkeyProps,\n placement,\n placementConfig.align,\n placementConfig.side,\n popupProps,\n positionerProps,\n slots,\n title,\n ],\n );\n\n if (title == null && !hotkey) {\n return children;\n }\n\n const resolvedPortalContainer = customContainer ?? portalContainer;\n\n return (\n <BaseTooltip.Root\n defaultOpen={defaultOpen}\n disabled={disabled}\n open={resolvedOpen}\n onOpenChange={handleOpenChange}\n >\n {triggerElement}\n {resolvedPortalContainer ? (\n <BaseTooltip.Portal container={resolvedPortalContainer} {...portalProps}>\n {popup}\n </BaseTooltip.Portal>\n ) : null}\n </BaseTooltip.Root>\n );\n },\n);\n\nTooltipStandalone.displayName = 'TooltipStandalone';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TooltipStandalone.mjs","names":["BaseTooltip"],"sources":["../../src/Tooltip/TooltipStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport clsx from 'clsx';\nimport {\n cloneElement,\n isValidElement,\n memo,\n type Ref,\n useCallback,\n useMemo,\n useState,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useFloatingLayer } from '@/hooks/useFloatingLayer';\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { styleProps } from '@/styles/stylex/props';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { placementMap } from '@/utils/placement';\n\nimport { TooltipArrowIcon } from './ArrowIcon';\nimport { styles } from './style';\nimport TooltipContent from './TooltipContent';\nimport { type TooltipProps } from './type';\n\nconst DEFAULT_OPEN_DELAY = 400;\nconst DEFAULT_CLOSE_DELAY = 100;\n\n/**\n * Tooltip component - displays small contextual hints on hover/focus\n * Compatible with Ant Design Tooltip-like API (subset)\n */\nexport const TooltipStandalone = memo<TooltipProps>(\n ({\n children,\n title,\n arrow = false,\n className,\n classNames,\n closeDelay,\n defaultOpen = false,\n disabled = false,\n getPopupContainer,\n hotkey,\n hotkeyProps,\n mouseEnterDelay,\n mouseLeaveDelay,\n onOpenChange,\n open,\n openDelay,\n placement = 'top',\n popupContainer,\n styles: customStylesProp,\n zIndex,\n ref: refProp,\n positionerProps,\n triggerProps,\n popupProps,\n portalProps,\n standalone: _standalone,\n ...restProps\n }) => {\n const isClient = useIsClient();\n const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n const [triggerNode, setTriggerNode] = useState<HTMLElement | null>(null);\n const triggerCallbackRef = useCallback((node: HTMLElement | null) => {\n if (node) setTriggerNode(node);\n }, []);\n\n const mergedOpen = open ?? uncontrolledOpen;\n const resolvedOpen = disabled ? false : mergedOpen;\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean) => {\n if (disabled && nextOpen) return;\n onOpenChange?.(nextOpen);\n if (open === undefined) {\n setUncontrolledOpen(nextOpen);\n }\n },\n [disabled, onOpenChange, open],\n );\n\n const resolvedOpenDelay = useMemo(() => {\n if (openDelay !== undefined) return openDelay;\n if (mouseEnterDelay !== undefined) return mouseEnterDelay * 1000;\n return DEFAULT_OPEN_DELAY;\n }, [mouseEnterDelay, openDelay]);\n\n const resolvedCloseDelay = useMemo(() => {\n if (closeDelay !== undefined) return closeDelay;\n if (mouseLeaveDelay !== undefined) return mouseLeaveDelay * 1000;\n return DEFAULT_CLOSE_DELAY;\n }, [closeDelay, mouseLeaveDelay]);\n\n const placementConfig = placementMap[placement] ?? placementMap.top;\n const baseSideOffset = arrow ? 8 : 6;\n\n const appElement = useAppElement();\n const floatingLayerContainer = useFloatingLayer();\n const portalContainer = floatingLayerContainer ?? appElement;\n\n const { isNativeButtonTriggerElement } = useNativeButton({\n children,\n });\n\n const slots = useMemo(() => {\n const customStyles = typeof customStylesProp === 'function' ? undefined : customStylesProp;\n return {\n arrow: styleProps(styles.arrow, classNames?.arrow, customStyles?.arrow),\n popup: styleProps(styles.popup, clsx(className, classNames?.root, classNames?.container), {\n ...customStyles?.root,\n ...customStyles?.container,\n }),\n positioner: styleProps(styles.positioner, undefined, { zIndex: zIndex ?? 114_514 }),\n viewport: styleProps(\n styles.viewport,\n clsx('lobe-tooltip-viewport', classNames?.content),\n customStyles?.content,\n ),\n };\n }, [\n className,\n classNames?.arrow,\n classNames?.container,\n classNames?.content,\n classNames?.root,\n customStylesProp,\n zIndex,\n ]);\n\n const triggerElement = useMemo(() => {\n const popupTriggerId =\n isValidElement(children) &&\n (children as any).props['aria-haspopup'] !== undefined &&\n (children as any).props.id !== undefined\n ? (children as any).props.id\n : undefined;\n\n const baseTriggerProps = {\n closeDelay: resolvedCloseDelay,\n delay: resolvedOpenDelay,\n disabled,\n ...triggerProps,\n id: popupTriggerId ?? triggerProps?.id,\n };\n\n if (isValidElement(children)) {\n return (\n <BaseTooltip.Trigger\n {...baseTriggerProps}\n render={(props) => {\n // Base UI's trigger props include `type=\"button\"` by default.\n // If we render into a non-<button> element, that prop is invalid and can warn.\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ref: triggerRef, ...triggerRest } = props as any;\n return triggerRest;\n })();\n\n const childProps = (children as any).props;\n const mergedProps = mergeProps(restProps, childProps, resolvedProps);\n const shouldPreservePopupTriggerId =\n childProps['aria-haspopup'] !== undefined && childProps.id !== undefined;\n\n return cloneElement(children as any, {\n ...mergedProps,\n id: shouldPreservePopupTriggerId ? childProps.id : mergedProps.id,\n ref: mergeRefs([\n (children as any).ref,\n (props as any).ref,\n refProp,\n triggerCallbackRef,\n ]),\n });\n }}\n />\n );\n }\n\n return (\n <BaseTooltip.Trigger\n {...baseTriggerProps}\n ref={mergeRefs([refProp, triggerCallbackRef]) as Ref<HTMLButtonElement>}\n >\n {children}\n </BaseTooltip.Trigger>\n );\n }, [\n children,\n disabled,\n isNativeButtonTriggerElement,\n refProp,\n resolvedCloseDelay,\n resolvedOpenDelay,\n restProps,\n triggerCallbackRef,\n triggerProps,\n ]);\n\n const customContainer = useMemo(() => {\n if (popupContainer) return popupContainer;\n if (!getPopupContainer || !isClient || !triggerNode) return undefined;\n return getPopupContainer(triggerNode);\n }, [popupContainer, getPopupContainer, isClient, triggerNode]);\n\n const popup = useMemo(\n () => (\n <BaseTooltip.Positioner\n align={placementConfig.align}\n data-placement={placement}\n side={placementConfig.side}\n sideOffset={baseSideOffset}\n {...slots.positioner}\n {...positionerProps}\n collisionPadding={positionerProps?.collisionPadding ?? getFloatingCollisionPadding()}\n >\n <BaseTooltip.Popup {...slots.popup} {...popupProps}>\n {arrow && <BaseTooltip.Arrow {...slots.arrow}>{TooltipArrowIcon}</BaseTooltip.Arrow>}\n <BaseTooltip.Viewport {...slots.viewport}>\n <TooltipContent hotkey={hotkey} hotkeyProps={hotkeyProps} title={title} />\n </BaseTooltip.Viewport>\n </BaseTooltip.Popup>\n </BaseTooltip.Positioner>\n ),\n [\n arrow,\n baseSideOffset,\n hotkey,\n hotkeyProps,\n placement,\n placementConfig.align,\n placementConfig.side,\n popupProps,\n positionerProps,\n slots,\n title,\n ],\n );\n\n if (title == null && !hotkey) {\n return children;\n }\n\n const resolvedPortalContainer = customContainer ?? portalContainer;\n\n return (\n <BaseTooltip.Root\n defaultOpen={defaultOpen}\n disabled={disabled}\n open={resolvedOpen}\n onOpenChange={handleOpenChange}\n >\n {triggerElement}\n {resolvedPortalContainer ? (\n <BaseTooltip.Portal container={resolvedPortalContainer} {...portalProps}>\n {popup}\n </BaseTooltip.Portal>\n ) : null}\n </BaseTooltip.Root>\n );\n },\n);\n\nTooltipStandalone.displayName = 'TooltipStandalone';\n"],"mappings":"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"}
|
package/es/Tree/Tree.mjs
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { styleProps } from "../styles/stylex/props.mjs";
|
|
3
|
+
import { useControlledState } from "../hooks/useControlledState.mjs";
|
|
3
4
|
import { FocusScope } from "../FocusScope/FocusScope.mjs";
|
|
4
5
|
import { focusScopeItem, useScopeArrowNav } from "../FocusScope/useScopeArrowNav.mjs";
|
|
5
6
|
import { styles } from "./style.mjs";
|
|
@@ -9,7 +10,6 @@ import TreeNode from "./TreeNode.mjs";
|
|
|
9
10
|
import { memo, useId, useMemo, useRef, useState } from "react";
|
|
10
11
|
import { jsx } from "react/jsx-runtime";
|
|
11
12
|
import clsx from "clsx";
|
|
12
|
-
import useControlledState from "use-merge-value";
|
|
13
13
|
//#region src/Tree/Tree.tsx
|
|
14
14
|
const EMPTY = [];
|
|
15
15
|
const Tree = memo(({ blockNode = false, checkStrictly = false, checkable = false, checkedKeys: checkedKeysProp, className, classNames = {}, defaultCheckedKeys = EMPTY, defaultExpandAll = false, defaultExpandedKeys = EMPTY, defaultSelectedKeys = EMPTY, disabled = false, expandedKeys: expandedKeysProp, indent = 20, multiple = false, onCheck, onExpand, onRightClick, onSelect, scopeId: scopeIdProp, selectedKeys: selectedKeysProp, showIcon = false, showLine = false, size = "middle", style, styles: customStyles = {}, switcherIcon, titleRender, treeData, vimKeys = false }) => {
|
package/es/Tree/Tree.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tree.mjs","names":[],"sources":["../../src/Tree/Tree.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo, useId, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { FocusScope, focusScopeItem, useScopeArrowNav } from '@/FocusScope';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { TreeContext, type TreeContextValue } from './context';\nimport { styles } from './style';\nimport TreeNode from './TreeNode';\nimport type { TreeDataNode, TreeProps } from './type';\nimport { conductCheck, flattenVisible, getAllKeys, getAncestorKeys, getSubtreeKeys } from './utils';\n\nconst EMPTY: string[] = [];\n\nconst Tree = memo<TreeProps>(\n ({\n blockNode = false,\n checkStrictly = false,\n checkable = false,\n checkedKeys: checkedKeysProp,\n className,\n classNames = {},\n defaultCheckedKeys = EMPTY,\n defaultExpandAll = false,\n defaultExpandedKeys = EMPTY,\n defaultSelectedKeys = EMPTY,\n disabled = false,\n expandedKeys: expandedKeysProp,\n indent = 20,\n multiple = false,\n onCheck,\n onExpand,\n onRightClick,\n onSelect,\n scopeId: scopeIdProp,\n selectedKeys: selectedKeysProp,\n showIcon = false,\n showLine = false,\n size = 'middle',\n style,\n styles: customStyles = {},\n switcherIcon,\n titleRender,\n treeData,\n vimKeys = false,\n }) => {\n const generatedId = useId();\n const scopeId = scopeIdProp ?? generatedId;\n const [expandedKeys, setExpandedKeys] = useControlledState<string[]>(\n defaultExpandAll ? getAllKeys(treeData) : defaultExpandedKeys,\n { value: expandedKeysProp },\n );\n const [selectedKeys, setSelectedKeys] = useControlledState<string[]>(defaultSelectedKeys, {\n value: selectedKeysProp,\n });\n const [checkedKeys, setCheckedKeys] = useControlledState<string[]>(defaultCheckedKeys, {\n value: checkedKeysProp,\n });\n\n const expanded = useMemo(() => new Set(expandedKeys), [expandedKeys]);\n const selected = useMemo(() => new Set(selectedKeys), [selectedKeys]);\n const flat = useMemo(() => flattenVisible(treeData, expanded), [treeData, expanded]);\n const { checked, halfChecked } = useMemo(\n () =>\n checkStrictly\n ? { checked: new Set(checkedKeys), halfChecked: new Set<string>() }\n : conductCheck(treeData, checkedKeys),\n [checkStrictly, treeData, checkedKeys],\n );\n\n const [activeKeyState, setActiveKeyState] = useState<string | null>(null);\n const setActiveKey = setActiveKeyState;\n const activeKey =\n activeKeyState && flat.some((row) => row.node.key === activeKeyState)\n ? activeKeyState\n : (selectedKeys.find((key) => flat.some((row) => row.node.key === key)) ??\n flat[0]?.node.key ??\n null);\n\n const anchorRef = useRef<string | null>(null);\n\n const rowOf = (key: string) =>\n document.querySelector<HTMLElement>(`[data-focus-scope=\"${scopeId}\"] [data-id=\"${key}\"]`);\n const focusRow = (key: string) => {\n setActiveKey(key);\n const row = rowOf(key);\n if (row) focusScopeItem(scopeId, row);\n };\n\n const isDisabled = (node: TreeDataNode) => disabled || !!node.disabled;\n\n const toggleExpand = (node: TreeDataNode) => {\n const willExpand = !expanded.has(node.key);\n const next = willExpand\n ? [...expandedKeys, node.key]\n : expandedKeys.filter((key) => key !== node.key);\n setExpandedKeys(next);\n onExpand?.(next, { expanded: willExpand, node });\n };\n\n const toggleSelect: TreeContextValue['toggleSelect'] = (node, event) => {\n if (isDisabled(node) || node.selectable === false) return;\n let next: string[];\n if (multiple && event?.shiftKey && anchorRef.current) {\n const a = flat.findIndex((row) => row.node.key === anchorRef.current);\n const b = flat.findIndex((row) => row.node.key === node.key);\n next = flat\n .slice(Math.min(a, b), Math.max(a, b) + 1)\n .filter((row) => !isDisabled(row.node) && row.node.selectable !== false)\n .map((row) => row.node.key);\n } else if (multiple && (event?.metaKey || event?.ctrlKey)) {\n next = selected.has(node.key)\n ? selectedKeys.filter((key) => key !== node.key)\n : [...selectedKeys, node.key];\n anchorRef.current = node.key;\n } else {\n next = [node.key];\n anchorRef.current = node.key;\n }\n setSelectedKeys(next);\n setActiveKey(node.key);\n onSelect?.(next, { node, selected: next.includes(node.key) });\n };\n\n const toggleCheck = (node: TreeDataNode) => {\n if (isDisabled(node) || node.checkable === false) return;\n const willCheck = !checked.has(node.key);\n const keys = checkStrictly ? [node.key] : getSubtreeKeys(node);\n const base = new Set(checkStrictly ? checkedKeys : checked);\n keys.forEach((key) => (willCheck ? base.add(key) : base.delete(key)));\n if (!willCheck && !checkStrictly)\n getAncestorKeys(treeData, node.key).forEach((key) => base.delete(key));\n const next = checkStrictly ? [...base] : [...conductCheck(treeData, base).checked];\n setCheckedKeys(next);\n setActiveKey(node.key);\n onCheck?.(next, { checked: willCheck, node });\n };\n\n const currentRow = () => {\n const focused = document.activeElement?.closest<HTMLElement>('[role=\"treeitem\"]');\n const key = focused?.dataset.id ?? activeKey;\n return flat.find((row) => row.node.key === key);\n };\n\n const withRow =\n (fn: (row: (typeof flat)[number], event: KeyboardEvent) => void) =>\n (event: KeyboardEvent) => {\n const row = currentRow();\n if (row) fn(row, event);\n };\n\n useScopeArrowNav({\n extra: {\n ' ': withRow((row, event) => {\n if (checkable && row.node.checkable !== false) toggleCheck(row.node);\n else toggleSelect(row.node, event);\n }),\n '*': withRow((row) => {\n const siblings = flat.filter(\n (r) => r.parentKey === row.parentKey && r.hasChildren && !expanded.has(r.node.key),\n );\n if (siblings.length === 0) return;\n const next = [...expandedKeys, ...siblings.map((r) => r.node.key)];\n setExpandedKeys(next);\n onExpand?.(next, { expanded: true, node: row.node });\n }),\n 'ArrowLeft': withRow((row) => {\n if (row.hasChildren && expanded.has(row.node.key)) toggleExpand(row.node);\n else if (row.parentKey) focusRow(row.parentKey);\n }),\n 'ArrowRight': withRow((row) => {\n if (!row.hasChildren) return;\n if (expanded.has(row.node.key)) focusRow(flat[row.index + 1].node.key);\n else toggleExpand(row.node);\n }),\n 'Enter': withRow((row, event) => toggleSelect(row.node, event)),\n },\n itemSelector: '[role=\"treeitem\"]',\n onItemFocus: (el) => el.dataset.id && setActiveKey(el.dataset.id),\n scopeId,\n vimKeys,\n });\n\n const ctx: TreeContextValue = {\n activeKey,\n blockNode,\n checkable,\n checked,\n classNames,\n disabled,\n expanded,\n halfChecked,\n indent,\n onRightClick: (event, node) => onRightClick?.({ event, node }),\n selected,\n setActiveKey,\n showIcon,\n showLine,\n size,\n styles: customStyles,\n switcherIcon,\n titleRender,\n toggleCheck,\n toggleExpand,\n toggleSelect,\n };\n\n return (\n <TreeContext value={ctx}>\n <FocusScope\n id={scopeId}\n role=\"tree\"\n {...styleProps(styles.root, clsx(classNames.root, className), {\n ...customStyles.root,\n ...style,\n })}\n >\n {treeData.map((node, i) => (\n <TreeNode\n depth={0}\n isLast={i === treeData.length - 1}\n key={node.key}\n node={node}\n trail={[]}\n />\n ))}\n </FocusScope>\n </TreeContext>\n );\n },\n);\n\nTree.displayName = 'Tree';\n\nexport default Tree;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tree.mjs","names":[],"sources":["../../src/Tree/Tree.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo, useId, useMemo, useRef, useState } from 'react';\n\nimport { FocusScope, focusScopeItem, useScopeArrowNav } from '@/FocusScope';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { TreeContext, type TreeContextValue } from './context';\nimport { styles } from './style';\nimport TreeNode from './TreeNode';\nimport type { TreeDataNode, TreeProps } from './type';\nimport { conductCheck, flattenVisible, getAllKeys, getAncestorKeys, getSubtreeKeys } from './utils';\n\nconst EMPTY: string[] = [];\n\nconst Tree = memo<TreeProps>(\n ({\n blockNode = false,\n checkStrictly = false,\n checkable = false,\n checkedKeys: checkedKeysProp,\n className,\n classNames = {},\n defaultCheckedKeys = EMPTY,\n defaultExpandAll = false,\n defaultExpandedKeys = EMPTY,\n defaultSelectedKeys = EMPTY,\n disabled = false,\n expandedKeys: expandedKeysProp,\n indent = 20,\n multiple = false,\n onCheck,\n onExpand,\n onRightClick,\n onSelect,\n scopeId: scopeIdProp,\n selectedKeys: selectedKeysProp,\n showIcon = false,\n showLine = false,\n size = 'middle',\n style,\n styles: customStyles = {},\n switcherIcon,\n titleRender,\n treeData,\n vimKeys = false,\n }) => {\n const generatedId = useId();\n const scopeId = scopeIdProp ?? generatedId;\n const [expandedKeys, setExpandedKeys] = useControlledState<string[]>(\n defaultExpandAll ? getAllKeys(treeData) : defaultExpandedKeys,\n { value: expandedKeysProp },\n );\n const [selectedKeys, setSelectedKeys] = useControlledState<string[]>(defaultSelectedKeys, {\n value: selectedKeysProp,\n });\n const [checkedKeys, setCheckedKeys] = useControlledState<string[]>(defaultCheckedKeys, {\n value: checkedKeysProp,\n });\n\n const expanded = useMemo(() => new Set(expandedKeys), [expandedKeys]);\n const selected = useMemo(() => new Set(selectedKeys), [selectedKeys]);\n const flat = useMemo(() => flattenVisible(treeData, expanded), [treeData, expanded]);\n const { checked, halfChecked } = useMemo(\n () =>\n checkStrictly\n ? { checked: new Set(checkedKeys), halfChecked: new Set<string>() }\n : conductCheck(treeData, checkedKeys),\n [checkStrictly, treeData, checkedKeys],\n );\n\n const [activeKeyState, setActiveKeyState] = useState<string | null>(null);\n const setActiveKey = setActiveKeyState;\n const activeKey =\n activeKeyState && flat.some((row) => row.node.key === activeKeyState)\n ? activeKeyState\n : (selectedKeys.find((key) => flat.some((row) => row.node.key === key)) ??\n flat[0]?.node.key ??\n null);\n\n const anchorRef = useRef<string | null>(null);\n\n const rowOf = (key: string) =>\n document.querySelector<HTMLElement>(`[data-focus-scope=\"${scopeId}\"] [data-id=\"${key}\"]`);\n const focusRow = (key: string) => {\n setActiveKey(key);\n const row = rowOf(key);\n if (row) focusScopeItem(scopeId, row);\n };\n\n const isDisabled = (node: TreeDataNode) => disabled || !!node.disabled;\n\n const toggleExpand = (node: TreeDataNode) => {\n const willExpand = !expanded.has(node.key);\n const next = willExpand\n ? [...expandedKeys, node.key]\n : expandedKeys.filter((key) => key !== node.key);\n setExpandedKeys(next);\n onExpand?.(next, { expanded: willExpand, node });\n };\n\n const toggleSelect: TreeContextValue['toggleSelect'] = (node, event) => {\n if (isDisabled(node) || node.selectable === false) return;\n let next: string[];\n if (multiple && event?.shiftKey && anchorRef.current) {\n const a = flat.findIndex((row) => row.node.key === anchorRef.current);\n const b = flat.findIndex((row) => row.node.key === node.key);\n next = flat\n .slice(Math.min(a, b), Math.max(a, b) + 1)\n .filter((row) => !isDisabled(row.node) && row.node.selectable !== false)\n .map((row) => row.node.key);\n } else if (multiple && (event?.metaKey || event?.ctrlKey)) {\n next = selected.has(node.key)\n ? selectedKeys.filter((key) => key !== node.key)\n : [...selectedKeys, node.key];\n anchorRef.current = node.key;\n } else {\n next = [node.key];\n anchorRef.current = node.key;\n }\n setSelectedKeys(next);\n setActiveKey(node.key);\n onSelect?.(next, { node, selected: next.includes(node.key) });\n };\n\n const toggleCheck = (node: TreeDataNode) => {\n if (isDisabled(node) || node.checkable === false) return;\n const willCheck = !checked.has(node.key);\n const keys = checkStrictly ? [node.key] : getSubtreeKeys(node);\n const base = new Set(checkStrictly ? checkedKeys : checked);\n keys.forEach((key) => (willCheck ? base.add(key) : base.delete(key)));\n if (!willCheck && !checkStrictly)\n getAncestorKeys(treeData, node.key).forEach((key) => base.delete(key));\n const next = checkStrictly ? [...base] : [...conductCheck(treeData, base).checked];\n setCheckedKeys(next);\n setActiveKey(node.key);\n onCheck?.(next, { checked: willCheck, node });\n };\n\n const currentRow = () => {\n const focused = document.activeElement?.closest<HTMLElement>('[role=\"treeitem\"]');\n const key = focused?.dataset.id ?? activeKey;\n return flat.find((row) => row.node.key === key);\n };\n\n const withRow =\n (fn: (row: (typeof flat)[number], event: KeyboardEvent) => void) =>\n (event: KeyboardEvent) => {\n const row = currentRow();\n if (row) fn(row, event);\n };\n\n useScopeArrowNav({\n extra: {\n ' ': withRow((row, event) => {\n if (checkable && row.node.checkable !== false) toggleCheck(row.node);\n else toggleSelect(row.node, event);\n }),\n '*': withRow((row) => {\n const siblings = flat.filter(\n (r) => r.parentKey === row.parentKey && r.hasChildren && !expanded.has(r.node.key),\n );\n if (siblings.length === 0) return;\n const next = [...expandedKeys, ...siblings.map((r) => r.node.key)];\n setExpandedKeys(next);\n onExpand?.(next, { expanded: true, node: row.node });\n }),\n 'ArrowLeft': withRow((row) => {\n if (row.hasChildren && expanded.has(row.node.key)) toggleExpand(row.node);\n else if (row.parentKey) focusRow(row.parentKey);\n }),\n 'ArrowRight': withRow((row) => {\n if (!row.hasChildren) return;\n if (expanded.has(row.node.key)) focusRow(flat[row.index + 1].node.key);\n else toggleExpand(row.node);\n }),\n 'Enter': withRow((row, event) => toggleSelect(row.node, event)),\n },\n itemSelector: '[role=\"treeitem\"]',\n onItemFocus: (el) => el.dataset.id && setActiveKey(el.dataset.id),\n scopeId,\n vimKeys,\n });\n\n const ctx: TreeContextValue = {\n activeKey,\n blockNode,\n checkable,\n checked,\n classNames,\n disabled,\n expanded,\n halfChecked,\n indent,\n onRightClick: (event, node) => onRightClick?.({ event, node }),\n selected,\n setActiveKey,\n showIcon,\n showLine,\n size,\n styles: customStyles,\n switcherIcon,\n titleRender,\n toggleCheck,\n toggleExpand,\n toggleSelect,\n };\n\n return (\n <TreeContext value={ctx}>\n <FocusScope\n id={scopeId}\n role=\"tree\"\n {...styleProps(styles.root, clsx(classNames.root, className), {\n ...customStyles.root,\n ...style,\n })}\n >\n {treeData.map((node, i) => (\n <TreeNode\n depth={0}\n isLast={i === treeData.length - 1}\n key={node.key}\n node={node}\n trail={[]}\n />\n ))}\n </FocusScope>\n </TreeContext>\n );\n },\n);\n\nTree.displayName = 'Tree';\n\nexport default Tree;\n"],"mappings":"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"}
|