feat(react/Calendar): enhance keyboard navigation and date selection

.changeset/tonic-ui-904.md

@@ -0,0 +1,7 @@
+---
+"@tonic-ui/react": minor
+"@tonic-ui/utils": patch
+---
+
+feat(react/Calendar): enhance keyboard navigation and date selection
+refactor(util/dom-query): handle invalid element input in `getAllFocusable`

packages/react-docs/pages/components/date-pickers/date-picker/index.page.mdx

@@ -41,6 +41,7 @@ Note that the `DateInput` component is currently not provided by the `@tonic-ui/
 ```jsx disabled
 // import
 import { InputControl, InputAdornment } from '@tonic-ui/react';
+import { CalendarIcon } from '@tonic-ui/react-icons';
 
 // DateInput
 const DateInput = React.forwardRef((props, ref) => {
@@ -52,7 +53,7 @@ const DateInput = React.forwardRef((props, ref) => {
       ref={ref}
       startAdornment={(
         <InputAdornment color={colorStyle.color.secondary}>
-          <Icon icon="calendar" />
+          <CalendarIcon />
         </InputAdornment>
       )}
       {...props}

packages/react-docs/pages/components/pagination/index.page.mdx

@@ -68,6 +68,6 @@ The `Pagination` component is designed to paginate a list of arbitrary items whe
 | disabled | boolean | false | If `true`, the component is disabled. |
 | page | number | | The current page number. |
 | selected | boolean | false | If `true`, the pagination item is selected. |
-| slot | `{ 'start-ellipsis'?: ReactNode, 'end-ellipsis'?: ReactNode, first?: ReactNode, previous?: ReactNode, next?: ReactNode, last?: ReactNode }` | `{ 'start-ellipsis': <Icon icon="more-horiz" />, 'end-ellipsis': <Icon icon="more-horiz" />, first: <Icon icon="collapse-left" />, previous: <Icon icon="angle-left" />, next: <Icon icon="angle-right" />, last: <Icon icon="collapse-right" /> }` | |
+| slot | `{ 'start-ellipsis'?: ReactNode, 'end-ellipsis'?: ReactNode, first?: ReactNode, previous?: ReactNode, next?: ReactNode, last?: ReactNode }` | `{ 'start-ellipsis': <MoreHorizIcon />, 'end-ellipsis': <MoreHorizIcon />, first: <CollapseLeftIcon />, previous: <AngleLeftIcon />, next: <AngleRightIcon />, last: <CollapseRightIcon /> }` | |
 | type | string | 'page' | The type of the pagination item. |
 | variant | string | 'ghost' | The variant to use. |

packages/react-docs/pages/components/popover/index.page.mdx

@@ -68,7 +68,7 @@ If you need to pass more than one child element or non-element children, wrap th
 
 ```jsx disabled
 <PopoverTrigger outline={0} shouldWrapChildren tabIndex={-1}>
-  <Icon icon="menu" height="5x" mr="2x" />
+  <MenuIcon height="5x" mr="2x" />
   <Text display="inline-block">Non-interactive Trigger</Text>
 </Popover>
 ```

packages/react-docs/pages/components/tooltip/index.page.mdx

@@ -41,7 +41,7 @@ If you need to pass more than one child element or non-element children, wrap th
 </Tooltip>
 
 <Tooltip label="This is a tooltip" shouldWrapChildren>
-  <Icon icon="menu" height="5x" mr="2x" />
+  <MenuIcon height="5x" mr="2x" />
   <Text display="inline-block">Text content</Text>
 </Tooltip>
 ```

packages/react-docs/pages/components/tree/multi-selection-checkboxes-with-custom-selection-behavior.js

@@ -16,6 +16,11 @@ import {
 import {
   useConst,
 } from '@tonic-ui/react-hooks';
+import {
+  FolderIcon,
+  FolderOpenIcon,
+  ServerIcon,
+} from '@tonic-ui/react-icons';
 import { ensureArray } from 'ensure-type';
 import React, { useCallback, useMemo } from 'react';
 import {
@@ -32,12 +37,19 @@ const TreeItemRender = ({
   const nodeLabel = node.label;
   const { multiSelect } = useTree();
 
-  const render = useCallback(({ isExpandable, isExpanded, isSelected, select, selectRange, toggleSelection }) => {
+  const render = useCallback(({
+    isExpandable,
+    isExpanded,
+    isSelected,
+    select,
+    selectRange,
+    toggleSelection,
+  }) => {
     const icon = (() => {
       if (isExpandable) {
-        return isExpanded ? 'folder-open' : 'folder';
+        return isExpanded ? FolderOpenIcon : FolderIcon;
       }
-      return 'server';
+      return ServerIcon;
     })();
     const iconColor = isExpandable ? 'yellow:50' : 'currentColor';
 
@@ -109,7 +121,7 @@ const TreeItemRender = ({
             }}
           />
         </Flex>
-        <Icon icon={icon} color={iconColor} mr="2x" />
+        <Icon as={icon} color={iconColor} mr="2x" />
         <OverflowTooltip label={nodeLabel}>
           {({ ref, style }) => (
             <Box