Update primereact version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cadolabs/sphere-ui",
-  "version": "6.0.0-no-deps.1",
+  "version": "6.1.0-alpha.1",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": "https://github.com/Cado-Labs/sphere-ui",
@@ -21,8 +21,8 @@
   "dependencies": {
     "bignumber.js": "^9.1.1",
     "primeflex": "^3.3.1",
-    "primeicons": "^6.0.1",
-    "primereact": "9.6.4",
+    "primeicons": "^7.0.0",
+    "primereact": "^10.8.4",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {

src/components/Button/style.scss

@@ -1,14 +1,19 @@
-.p-button.p-component {
+.p-button:not(.p-paginator-page).p-component:not(.p-button-icon-only) {
   padding: .35rem .75rem;
   font-size: .9rem;
-}
 
-.p-button.p-button-sm.p-component {
-  padding: .25rem .65rem;
-  font-size: .8rem;
+  &.p-button-sm {
+    padding: .25rem .65rem;
+    font-size: .8rem;
+  }
+
+  &.p-button-lg {
+    padding: .5rem 1rem;
+    font-size: 1rem;
+  }
 }
 
-.p-button.p-button-lg.p-component {
-  padding: .5rem 1rem;
-  font-size: 1rem;
+.p-calendar .p-inputtext {
+  flex: 1 1 auto;
+  width: 1%;
 }

src/components/Calendar/index.js

@@ -0,0 +1,28 @@
+import React, { useRef, useImperativeHandle } from "react"
+import { Calendar as PrimeCalendar } from "primereact/calendar"
+
+export const Calendar = React.forwardRef((props, ref) => {
+  const calendarRef = useRef(null)
+
+  useImperativeHandle(ref, () => calendarRef?.current)
+
+  const handleFocus = () => {
+    if (props.onFocus) {
+      props.onFocus()
+    }
+
+    setTimeout(() => {
+      if (calendarRef?.current) {
+        calendarRef.current.focus()
+      }
+    }, 0)
+  }
+
+  return (
+    <PrimeCalendar
+      {...props}
+      ref={calendarRef}
+      onFocus={handleFocus}
+    />
+  )
+})

src/components/DatePicker/index.js

@@ -1,9 +1,10 @@
 import React, { useMemo, useState } from "react"
-import { Calendar } from "primereact/calendar"
 import { locale as primeLocale } from "primereact/api"
 
 import { getYearRange, filterTooltipOptions, pickDataAttributes } from "../../utils"
 
+import { Calendar } from "../Calendar"
+
 import { withRange } from "./withRange"
 import { MONTHS, START_DATE } from "./constants"
 
@@ -148,7 +149,10 @@ export const DatePicker = React.forwardRef(({
 
   const renderDatePicker = () => {
     return (
-      <Calendar {...getDefaultProps()} numberOfMonths={1} />
+      <Calendar
+        {...getDefaultProps()}
+        numberOfMonths={1}
+      />
     )
   }
 

src/components/DatePicker/withRange.js

@@ -6,11 +6,11 @@ import { Button } from "../Button"
 
 import { LOCALES_RANGE_BLOCKS } from "./constants"
 
-export const withRange = Component =>
-  class extends React.Component {
+export const withRange = Component => {
+  const WrappedComponent = class extends React.Component {
     constructor (props) {
       super(props)
-      this.refCalendar = React.createRef()
+      this.refCalendar = props.forwardedRef || React.createRef()
     }
 
     clear = () => {
@@ -60,7 +60,13 @@ export const withRange = Component =>
 
     setAllTime = () => {
       const { month, day, year } = getPartsOfTime()
-      const newDate = [this.props.startCalendarDate, new Date(year, month, day)]
+      const startDate = new Date(this.props.startCalendarDate)
+
+      const startDay = startDate.getUTCDate()
+      const startMonth = startDate.getUTCMonth()
+      const startYear = startDate.getUTCFullYear()
+
+      const newDate = [new Date(startYear, startMonth, startDay), new Date(year, month, day)]
 
       this.onChange(newDate)
     }
@@ -185,3 +191,8 @@ export const withRange = Component =>
       )
     }
   }
+
+  return React.forwardRef((props, ref) => (
+    <WrappedComponent {...props} forwardedRef={ref} />
+  ))
+}

src/components/DateTimePicker/index.js

@@ -1,8 +1,8 @@
 import React from "react"
-import { Calendar } from "primereact/calendar"
 
 import { getYearRange, filterTooltipOptions, pickDataAttributes } from "../../utils"
 
+import { Calendar } from "../Calendar"
 import { START_DATE } from "../DatePicker/constants"
 
 export const DateTimePicker = React.forwardRef(({

src/components/MultiSelect/index.js

@@ -6,19 +6,6 @@ import { filterTooltipOptions, shouldFilterSelectOptions, pickDataAttributes } f
 
 import { LOCALES_BUTTONS_SET } from "./constants"
 
-const proxyDisplay = display => {
-  const isChip = display === "chip"
-
-  if (isChip) {
-    // eslint-disable-next-line
-    console.warn(`The "display" prop value has been replaced with "comma"
-      to avoid incorrect behavior caused by a bug in the primereact library.
-      issue: https://github.com/primefaces/primereact/issues/7125`)
-  }
-
-  return isChip ? "comma" : display
-}
-
 export const MultiSelect = React.forwardRef(({
   options,
   value,
@@ -55,6 +42,8 @@ export const MultiSelect = React.forwardRef(({
   disabled = false,
   showClear = false,
   inputRef,
+  virtualizationThreshold = 30,
+  itemSize = 35,
   ...props
 }, ref) => {
   const filteredTooltipOptions = filterTooltipOptions(tooltipOptions)
@@ -127,6 +116,15 @@ export const MultiSelect = React.forwardRef(({
     )
   }
 
+  const virtualScrollProps = () => {
+    const hasMoreOptions = options && options.length > virtualizationThreshold
+    const isGroupDisplay = optionGroupLabel && optionGroupChildren
+
+    if (!hasMoreOptions || isGroupDisplay) return {}
+
+    return { virtualScrollerOptions: { itemSize } }
+  }
+
   return (
     <PrimeMultiSelect
       ref={ref}
@@ -164,13 +162,15 @@ export const MultiSelect = React.forwardRef(({
       disabled={disabled}
       selectedItemsLabel={selectedItemsLabel}
       showClear={showClear}
-      display={proxyDisplay(display)}
+      display={display}
       overlayVisible={overlayVisible}
       removeIcon={removeIcon()}
       tooltip={tooltip}
       tooltipOptions={filteredTooltipOptions}
       dataKey={dataKey}
       {...dataAttributes}
+      {...props}
+      {...virtualScrollProps()}
     />
   )
 })

src/components/MultiSelect/style.scss

@@ -9,6 +9,15 @@
   &-trigger {
     width: 2.2rem;
   }
+
+  & .p-multiselect-label {
+    padding-right: .9rem;
+  }
+
+  & .p-multiselect-clear-icon {
+    right: 2rem;
+    color: var(--text-color-secondary);
+  }
 }
 
 .p-multiselect-footer {

src/components/Pagination/style.scss

@@ -6,3 +6,25 @@
   cursor: default;
   user-select: none;
 }
+
+.p-paginator-page,
+.p-paginator-next,
+.p-paginator-last,
+.p-paginator-first,
+.p-paginator-prev,
+.p-paginator-current {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  line-height: 1;
+  user-select: none;
+}
+
+.p-paginator {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}

src/components/TimePicker/index.js

@@ -1,8 +1,9 @@
 import React from "react"
-import { Calendar } from "primereact/calendar"
 
 import { pickDataAttributes } from "../../utils"
 
+import { Calendar } from "../Calendar"
+
 export const TimePicker = React.forwardRef(({
   id,
   name,

src/components/Tree/index.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect, useRef, useImperativeHandle } from "react"
 import { Tree as PrimeTree } from "primereact/tree"
 
 import { pickDataAttributes } from "../../utils"
@@ -42,9 +42,22 @@ export const Tree = React.forwardRef(({
   ...props
 }, ref) => {
   const dataAttributes = pickDataAttributes(props)
+
+  const treeRef = useRef(null)
+
+  useImperativeHandle(ref, () => treeRef.current)
+
+  useEffect(() => {
+    const treeElement = treeRef.current?.getElement()
+    if (treeElement) {
+      treeElement.removeAttribute("role")
+      treeElement.querySelectorAll("[role]").forEach(el => el.removeAttribute("role"))
+    }
+  })
+
   return (
     <PrimeTree
-      ref={ref}
+      ref={treeRef}
       id={id}
       value={value}
       selectionMode={selectionMode}

src/index.js

@@ -3,6 +3,10 @@ import "./index.scss"
 export * from "primereact/utils"
 export * from "primereact/api"
 
+export { IconField } from "primereact/iconfield"
+export { InputIcon } from "primereact/inputicon"
+export { ButtonGroup } from "primereact/buttongroup"
+
 export { Accordion, AccordionTab } from "./components/Accordion"
 export { AutoComplete } from "./components/AutoComplete"
 export { Avatar } from "./components/Avatar"

storybook/stories/display/Button/button.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 
-import { Button } from "@cadolabs/sphere-ui"
+import { Button, ButtonGroup } from "@cadolabs/sphere-ui"
 import i18n from "@i18n"
 
 const I18N_PREFIX = "stories.button"
@@ -125,11 +125,11 @@ function ButtonExample () {
       <Button icon="pi pi-times" className="p-button-rounded p-button-danger p-button-outlined" />
 
       <h3>Button Set</h3>
-      <span className="p-buttonset">
+      <ButtonGroup>
         <Button label="Save" icon="pi pi-check" />
         <Button label="Delete" icon="pi pi-trash" />
         <Button label="Cancel" icon="pi pi-times" />
-      </span>
+      </ButtonGroup>
 
       <h3>Sizes</h3>
       <Button label="Small" icon="pi pi-check" className="p-button-sm"  />
@@ -146,7 +146,7 @@ export const button = {
     description: i18n.t(`${I18N_PREFIX}.content`),
   },
   code,
-  scope: { Button },
+  scope: { Button, ButtonGroup },
   descriptionProps: [
     { name: "label", type: "string", description: `${I18N_PREFIX}.props.label` },
     { name: "icon", type: "any", description: `${I18N_PREFIX}.props.icon` },

storybook/styles/global.scss

@@ -77,7 +77,7 @@ pre[class*="language-"] {
 }
 
 .button-demo {
-  .p-button {
+  .p-button:not(.p-button-group .p-button) {
     margin-right: .5rem;
   }
 

yarn.lock

@@ -2906,15 +2906,15 @@ primeflex@^3.3.1:
   resolved "https://registry.yarnpkg.com/primeflex/-/primeflex-3.3.1.tgz#361dddf6eb5db50d733e4cddd4b6e376a3d7bd68"
   integrity sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ==
 
-primeicons@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/primeicons/-/primeicons-6.0.1.tgz#431fa7c79825934eefd62087d8e1faa6a9e376ad"
-  integrity sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA==
+primeicons@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/primeicons/-/primeicons-7.0.0.tgz#6b25c3fdcb29bb745a3035bdc1ed5902f4a419cf"
+  integrity sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==
 
-primereact@9.6.4:
-  version "9.6.4"
-  resolved "https://registry.yarnpkg.com/primereact/-/primereact-9.6.4.tgz#df535bf00c0b7e825d454ff4e4671c9848f37416"
-  integrity sha512-jW5t1Ct1coMGi1e+GWyLgVmxHQpEGtP3Pu2S/zsX8/yUgzDvn/ef0gaQ8l9/gihSnt/n4z4lFsHmn8Vb3j89yg==
+primereact@^10.8.4:
+  version "10.8.4"
+  resolved "https://registry.yarnpkg.com/primereact/-/primereact-10.8.4.tgz#c90938cd0575a2a21762bff4c65a5e93f24eafb3"
+  integrity sha512-jwkSzq6pOHayzEh+9dgk2M71gEZtoQakwPKVo3FUJO3eEX3SoAOchON+Xm1tGCNqtd66ca8RgOWQcpv3AQoMvg==
   dependencies:
     "@types/react-transition-group" "^4.4.1"
     react-transition-group "^4.4.1"