@hazelcast/ui 1.0.1-next.9 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazelcast/ui",
-  "version": "1.0.1-next.9+8439c75",
+  "version": "1.2.0",
   "description": "Hazelcast design system components",
   "author": "",
   "homepage": "https://github.com/hazelcast/frontend-shared#readme",
@@ -43,15 +43,15 @@
     "url": "https://github.com/hazelcast/frontend-shared/issues"
   },
   "dependencies": {
-    "@codemirror/basic-setup": "0.18.0",
-    "@codemirror/legacy-modes": "0.18.0",
-    "@codemirror/stream-parser": "0.18.2",
-    "@codemirror/view": "0.18.8",
-    "@hazelcast/helpers": "^1.0.2",
-    "@hazelcast/services": "^1.0.2",
+    "@codemirror/basic-setup": "0.19.0",
+    "@codemirror/stream-parser": "0.19.2",
+    "@codemirror/view": "0.19.9",
+    "@hazelcast/helpers": "1.0.1-next.46",
+    "@hazelcast/services": "^1.2.0",
     "@headlessui/react": "^1.2.0",
     "@icons-pack/react-simple-icons": "^3.13.0",
     "@popperjs/core": "^2.5.3",
+    "@types/react-modal": "3.12.1",
     "@types/react-select": "3.0.26",
     "@types/react-table": "^7.0.28",
     "classnames": "^2.2.6",
@@ -72,10 +72,11 @@
     "use-deep-compare": "^1.1.0"
   },
   "devDependencies": {
-    "@hazelcast/test-helpers": "^1.0.2",
+    "@codemirror/legacy-modes": "0.19.0",
+    "@hazelcast/test-helpers": "^1.2.0",
     "@storybook/addon-docs": "6.1.21",
     "@storybook/addons": "6.1.21",
-    "@storybook/preset-scss": "^1.0.2",
+    "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "6.1.21",
     "@storybook/theming": "6.1.21",
     "@types/classnames": "^2.2.10",
@@ -84,7 +85,6 @@
     "@types/react": "^16.14.4",
     "@types/react-datepicker": "^3.1.3",
     "@types/react-dom": "^16.9.11",
-    "@types/react-modal": "^3.10.6",
     "doiuse": "^4.2.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
@@ -92,19 +92,19 @@
     "postcss": "^8.1.1",
     "postcss-cli": "^8.1.0",
     "postcss-reporter": "^7.0.1",
-    "postcss-scss": "^3.0.2",
+    "postcss-scss": "^3.0.5",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "storybook-addon-designs": "5.4.2",
     "stylelint": "^13.7.2",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",
-    "stylelint-scss": "^3.18.0",
+    "stylelint-scss": "^3.19.0",
     "yup": "^0.32.9"
   },
   "peerDependencies": {
     "react": "^16.14.0",
     "react-dom": "^16.14.0"
   },
-  "gitHead": "8439c755ab9f4bc1cccf5d6624b9b7d104eafb1f"
+  "gitHead": "46315e51c611ac84d5b786d497c6d03e12a73333"
 }

package/styles/constants/_sizes.scss

@@ -8,7 +8,7 @@ $grid: 0.25rem !default;
 $alertWidth: 350px !default;
 
 $borderRadius: $grid * 1.25 !default;
-$borderRadiusButtonSmall: $grid * 3.75 !default;
+$borderRadiusButtonSmall: $grid * 5 !default;
 
 $borderRadiusToast: 37px !default;
 
@@ -20,7 +20,7 @@ $borderRadiusTimeField: 3px !default;
 $separatorWidth: 1px !default;
 
 $borderWidth: 1px !default;
-$borderWidthButton: 2px !default;
+$borderWidthButton: 1px !default;
 
 $outlineWidth: 2px !default;
 
@@ -74,13 +74,14 @@ $sliderThumbShadowSize: 1px;
 $sliderThumbShadowBlur: $grid;
 $sliderFillBorderSize: 1px;
 
-$emptyStateMaxWidth: 960px !important;
 $emptyStateButtonMinWidthNormal: 120px !default;
 $emptyStateButtonMinWidthLarge: 140px !default;
 
 $borderRadiusNotification: 3px;
 
 // Table column widths
-$tableColumnMinWidth: 30;
-$tableColumnWidth: 150;
-$tableColumnMaxWidth: 200;
+$tableColumnMinWidth: 60;
+$tableColumnWidth: 170;
+$tableColumnMaxWidth: 600;
+
+$errorHeight: $grid * 4.75;

package/styles/constants/_typography.scss

@@ -1,12 +1,12 @@
-$fontFamilyHeading: 'Ubuntu', sans-serif !default;
+$fontFamilyHeading: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
 $fontWeightHeadingLight: 300 !default;
 $fontWeightHeadingRegular: 400 !default;
 $fontWeightHeadingBold: 500 !default;
 
-$fontFamilyText: 'Open Sans', sans-serif !default;
+$fontFamilyText: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
 $fontWeightTextLight: 300 !default;
 $fontWeightTextRegular: 400 !default;
-$fontWeightTextBold: 600 !default;
+$fontWeightTextBold: 500 !default;
 
 // https://www.figma.com/file/8mVm6LTbp2Z0RaWWjTZoft/%F0%9F%90%9DHIVE?node-id=0%3A136
 $fontSizeH1: 2rem !default;

package/styles/fonts.css

@@ -1,77 +1,41 @@
-/* Generated with https://google-webfonts-helper.herokuapp.com/fonts */
-
-/* ubuntu-300 - latin */
+/* roboto-300 - latin */
 @font-face {
-  font-family: 'Ubuntu';
+  font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
-  src: url('../assets/ubuntu-v15-latin-300.eot'); /* IE9 Compat Modes */
-  src: local('Ubuntu Light'), local('Ubuntu-Light'), url('../assets/ubuntu-v15-latin-300.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/ubuntu-v15-latin-300.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/ubuntu-v15-latin-300.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/ubuntu-v15-latin-300.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/ubuntu-v15-latin-300.svg#Ubuntu') format('svg'); /* Legacy iOS */
-}
-/* ubuntu-regular - latin */
-@font-face {
-  font-family: 'Ubuntu';
-  font-style: normal;
-  font-weight: 400;
-  src: url('../assets/ubuntu-v15-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url('../assets/ubuntu-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/ubuntu-v15-latin-regular.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/ubuntu-v15-latin-regular.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/ubuntu-v15-latin-regular.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/ubuntu-v15-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
-}
-/* ubuntu-500 - latin */
-@font-face {
-  font-family: 'Ubuntu';
-  font-style: normal;
-  font-weight: 500;
-  src: url('../assets/ubuntu-v15-latin-500.eot'); /* IE9 Compat Modes */
-  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url('../assets/ubuntu-v15-latin-500.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/ubuntu-v15-latin-500.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/ubuntu-v15-latin-500.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/ubuntu-v15-latin-500.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/ubuntu-v15-latin-500.svg#Ubuntu') format('svg'); /* Legacy iOS */
+  src: url('../fonts/roboto-v27-latin-300.eot'); /* IE9 Compat Modes */
+  src: local(''),
+  url('../fonts/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('../fonts/roboto-v27-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+  url('../fonts/roboto-v27-latin-300.woff') format('woff'), /* Modern Browsers */
+  url('../fonts/roboto-v27-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
+  url('../fonts/roboto-v27-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
 }
 
-/* open-sans-300 - latin */
+/* roboto-regular - latin */
 @font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 300;
-  src: url('../assets/open-sans-v18-latin-300.eot'); /* IE9 Compat Modes */
-  src: local('Open Sans Light'), local('OpenSans-Light'), url('../assets/open-sans-v18-latin-300.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/open-sans-v18-latin-300.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/open-sans-v18-latin-300.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/open-sans-v18-latin-300.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/open-sans-v18-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-/* open-sans-regular - latin */
-@font-face {
-  font-family: 'Open Sans';
+  font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  src: url('../assets/open-sans-v18-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url('../assets/open-sans-v18-latin-regular.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/open-sans-v18-latin-regular.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/open-sans-v18-latin-regular.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/open-sans-v18-latin-regular.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/open-sans-v18-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
+  src: url('../fonts/roboto-v27-latin-regular.eot'); /* IE9 Compat Modes */
+  src: local(''),
+  url('../fonts/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('../fonts/roboto-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+  url('../fonts/roboto-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
+  url('../fonts/roboto-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+  url('../fonts/roboto-v27-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
 }
-/* open-sans-600 - latin */
+
+/* roboto-500 - latin */
 @font-face {
-  font-family: 'Open Sans';
+  font-family: 'Roboto';
   font-style: normal;
-  font-weight: 600;
-  src: url('../assets/open-sans-v18-latin-600.eot'); /* IE9 Compat Modes */
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url('../assets/open-sans-v18-latin-600.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/open-sans-v18-latin-600.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/open-sans-v18-latin-600.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/open-sans-v18-latin-600.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/open-sans-v18-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
+  font-weight: 500;
+  src: url('../fonts/roboto-v27-latin-500.eot'); /* IE9 Compat Modes */
+  src: local(''),
+  url('../fonts/roboto-v27-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('../fonts/roboto-v27-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
+  url('../fonts/roboto-v27-latin-500.woff') format('woff'), /* Modern Browsers */
+  url('../fonts/roboto-v27-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
+  url('../fonts/roboto-v27-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
 }

package/styles/helpers/_a11y.scss

@@ -4,6 +4,10 @@
   box-shadow: inset 0 0 0 c.$outlineWidth c.$colorAccessibilityOutline;
 }
 
+@mixin outlineAround {
+  box-shadow: 0 0 0 c.$outlineWidth c.$colorAccessibilityOutline;
+}
+
 @mixin outlineFormField {
   border-color: c.$colorAccessibilityOutline;
   // Border is also colored with the a11y color. We need to make the total visible outline width c.$outlineWidth, including the border

package/styles/helpers/_error.scss

@@ -0,0 +1,17 @@
+@use '../constants' as c;
+
+@mixin withError {
+  .withError {
+    position: relative;
+    padding-bottom: c.$errorHeight;
+
+    .errorContainer {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      overflow: hidden;
+      height: c.$errorHeight;
+      width: 100%;
+    }
+  }
+}

package/styles/helpers/_index.scss

@@ -1,3 +1,4 @@
 @forward './a11y';
 @forward './input';
 @forward './text';
+@forward './error';

package/lib/Calendar/components/CalendarHeader.tsx

@@ -1,45 +0,0 @@
-import React, { FC } from 'react'
-import { ReactDatePickerProps } from 'react-datepicker'
-import { ChevronLeft, ChevronRight } from 'react-feather'
-import { format } from 'date-fns'
-
-import { IconButton } from '../../IconButton'
-
-import styles from '../Calendar.module.scss'
-import styleConsts from '../../../styles/constants/export.module.scss'
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type ExtractFnArgumentType<T> = T extends (arg: infer U) => any ? U : never
-
-/*
- * Note:
- * react-datepicker does expose header props type as "renderCustomHeader", however the property is defined
- * as a render-prop.
- * This way we can pick the argument type from the render function and convert the property
- * to use a regular component, rather than a render-prop.
- *
- * There is no significant benefit other than readability.
- */
-export type CalendarHeaderProps = ExtractFnArgumentType<ReactDatePickerProps['renderCustomHeader']>
-
-export const CalendarHeader: FC<CalendarHeaderProps> = ({ date, decreaseMonth, increaseMonth }) => {
-  return (
-    <div data-test="date-picker-header" className={styles.headerContainer}>
-      <IconButton
-        data-test="date-picker-header-icon-previous"
-        icon={ChevronLeft}
-        ariaLabel="Previous month"
-        iconColor={styleConsts.colorPrimary}
-        onClick={decreaseMonth}
-      />
-      <div className={styles.headerMonthAndYear}>{format(date, 'MMMM y')}</div>
-      <IconButton
-        data-test="date-picker-header-icon-next"
-        icon={ChevronRight}
-        ariaLabel="Next month"
-        iconColor={styleConsts.colorPrimary}
-        onClick={increaseMonth}
-      />
-    </div>
-  )
-}

package/lib/Calendar/components/CalendarInput.tsx

@@ -1,50 +0,0 @@
-import React, { FC, ChangeEvent, InputHTMLAttributes, forwardRef } from 'react'
-import { Calendar } from 'react-feather'
-
-import { TextField } from '../../TextField'
-import { CalendarSize } from '../Calendar'
-
-export type CalendarInputInternalProps = {
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void
-} & CalendarInputExtraProps &
-  Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>
-
-export const CalendarInputInternal: FC<CalendarInputInternalProps> = ({ className, value, onChange, label, textFieldSize, ...props }) => (
-  <TextField<'text'>
-    {...props}
-    size={textFieldSize}
-    data-test="calendar-input"
-    value={value?.toString()}
-    onChange={onChange}
-    inputContainerClassName={className}
-    type="text"
-    name="calendar-input"
-    label={label}
-    inputTrailingIcon={Calendar}
-    inputTrailingIconLabel="Calendar Icon"
-  />
-)
-
-export type CalendarInputExtraProps = {
-  label: string
-  textFieldSize?: CalendarSize
-  className?: string
-}
-
-/*
- * Note:
- * The types are not available, the element is internally instantiated via React.cloneElement
- * We need to accept the props as unknown and cast them in place
- * Otherwise "Calendar.customInput" would require us to pass them explicitly
- */
-export type CalendarInputProps = unknown & CalendarInputExtraProps
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const CalendarInput: FC<CalendarInputProps> = forwardRef((props, ref) => {
-  // Note: Cast the "unknown" props to the actual type
-  const propsTyped = props as CalendarInputInternalProps
-
-  return <CalendarInputInternal {...propsTyped} />
-})
-
-CalendarInput.displayName = 'CalendarInput'

package/lib/Calendar/components/CalendarTime.tsx

@@ -1,116 +0,0 @@
-import React, { ChangeEvent, FC, useCallback, useEffect, useState } from 'react'
-import { format, parse } from 'date-fns'
-
-import { Button } from '../../Button'
-import { timePoints } from '../helpers/consts'
-import { TimeField } from '../../TimeField'
-
-import styles from './CalendarTime.module.scss'
-
-// Note: AM/PM 1-12 hours time
-const DATE_FORMAT = 'hh:mm a'
-// Note: 0-23 hours time
-const DATE_FORMAT_NO_MERIDIEM = 'HH:mm'
-
-export type CalendarTimeInternalProps = {
-  date: Date
-  onChange: (timeString: string) => void
-  value: string
-}
-
-export const CalendarTimeInternal: FC<CalendarTimeInternalProps> = ({ date, value, onChange }) => {
-  const [time, setTime] = useState(value)
-  const [timeInputError, setTimeInputError] = useState<string | undefined>()
-
-  /*
-   * Note:
-   * We cannot override how react-datepicker handles time values.
-   * It always expects format of "xx:xx" to parse the hours and minutes from. (See Source 2. link below)
-   *
-   * This is not an issue for majority of browsers, however as for IE11, where <input type="time" />
-   * fall back to <input type="text" />, this becomes an issue.
-   *
-   * Furthermore, the package even does not handle potential thrown error by date-fns' parse.
-   * Even the live demos do crash on an input like "10:10q" (See source 1. link below).
-   *
-   * For this reasons we need to provide our own wrapper around the functionality to achieve 2 things:
-   * - Provide IE11 with a proper fallback
-   * - Prevent the invalid input value crash
-   * - Provide the user with an input error in case the value is invalid
-   *
-   * Source(1): https://reactdatepicker.com/#example-custom-time-input
-   * Source(2): https://github.com/Hacker0x01/react-datepicker/blob/master/src/inputTime.jsx#L32
-   */
-  useEffect(() => {
-    setTime(value)
-  }, [value])
-
-  const handleTimeInputChange = useCallback(
-    ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
-      setTime(value)
-      const parsedDate = parse(value, DATE_FORMAT_NO_MERIDIEM, date)
-
-      if (!isNaN(parsedDate.valueOf())) {
-        setTimeInputError(undefined)
-        onChange(value)
-      } else {
-        setTimeInputError('Invalid time')
-      }
-    },
-    [onChange, date],
-  )
-
-  const handleDateClick = useCallback(
-    (dp) => () => {
-      // Note: Input time (derived from timePoints) is in 'DATE_FORMAT'
-      const parsedDate = parse(dp, DATE_FORMAT, date)
-      // Note: Output time, that we feed back to 'react-datetime' is in 'DATE_FORMAT_NO_MERIDIEM' format
-      const timeStringWithoutAm = format(parsedDate, DATE_FORMAT_NO_MERIDIEM)
-      onChange(timeStringWithoutAm)
-    },
-    [onChange, date],
-  )
-
-  return (
-    <div data-test="calendar-time" className={styles.container}>
-      <div data-test="calendar-time-header" className={styles.header}>
-        <TimeField
-          ariaLabel="Time Input"
-          error={timeInputError}
-          className={styles.input}
-          name="time"
-          value={time.toString()}
-          onChange={handleTimeInputChange}
-        />
-      </div>
-      <div data-test="calendar-time-timePoints" className={styles.timePoints}>
-        {timePoints.map((tP) => (
-          <Button
-            className={styles.timePoint}
-            bodyClassName={styles.timePointBody}
-            key={tP}
-            kind="transparent"
-            onClick={handleDateClick(tP)}
-          >
-            {tP}
-          </Button>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-/*
- * Note:
- * The types are not available, the element is internally instantiated via React.cloneElement
- * We need to accept the props as unknown and cast them in place
- * Otherwise "Calendar.customTimeInput" would require us to pass them explicitly
- */
-export type CalendarTimeProps = unknown
-
-export const CalendarTime: FC<CalendarTimeProps> = (props) => {
-  // Note: Cast the "unknown" props to the actual type
-  const propsTyped = props as CalendarTimeInternalProps
-
-  return <CalendarTimeInternal {...propsTyped} />
-}

package/lib/Calendar/helpers/consts.ts

@@ -1,99 +0,0 @@
-export const timePoints = [
-  // Source: https://simple.wikipedia.org/wiki/12-hour_clock
-  '12:00 AM',
-  '12:15 AM',
-  '12:30 AM',
-  '12:45 AM',
-  '01:00 AM',
-  '01:15 AM',
-  '01:30 AM',
-  '01:45 AM',
-  '02:00 AM',
-  '02:15 AM',
-  '02:30 AM',
-  '02:45 AM',
-  '03:00 AM',
-  '03:15 AM',
-  '03:30 AM',
-  '03:45 AM',
-  '04:00 AM',
-  '04:15 AM',
-  '04:30 AM',
-  '04:45 AM',
-  '05:00 AM',
-  '05:15 AM',
-  '05:30 AM',
-  '05:45 AM',
-  '06:00 AM',
-  '06:15 AM',
-  '06:30 AM',
-  '06:45 AM',
-  '07:00 AM',
-  '07:15 AM',
-  '07:30 AM',
-  '07:45 AM',
-  '08:00 AM',
-  '08:15 AM',
-  '08:30 AM',
-  '08:45 AM',
-  '09:00 AM',
-  '09:15 AM',
-  '09:30 AM',
-  '09:45 AM',
-  '10:00 AM',
-  '10:15 AM',
-  '10:30 AM',
-  '10:45 AM',
-  '11:00 AM',
-  '11:15 AM',
-  '11:30 AM',
-  '11:45 AM',
-  '12:00 PM',
-  '12:15 PM',
-  '12:30 PM',
-  '12:45 PM',
-  '01:00 PM',
-  '01:15 PM',
-  '01:30 PM',
-  '01:45 PM',
-  '02:00 PM',
-  '02:15 PM',
-  '02:30 PM',
-  '02:45 PM',
-  '03:00 PM',
-  '03:15 PM',
-  '03:30 PM',
-  '03:45 PM',
-  '04:00 PM',
-  '04:15 PM',
-  '04:30 PM',
-  '04:45 PM',
-  '05:00 PM',
-  '05:15 PM',
-  '05:30 PM',
-  '05:45 PM',
-  '06:00 PM',
-  '06:15 PM',
-  '06:30 PM',
-  '06:45 PM',
-  '07:00 PM',
-  '07:15 PM',
-  '07:30 PM',
-  '07:45 PM',
-  '08:00 PM',
-  '08:15 PM',
-  '08:30 PM',
-  '08:45 PM',
-  '09:00 PM',
-  '09:15 PM',
-  '09:30 PM',
-  '09:45 PM',
-  '10:00 PM',
-  '10:15 PM',
-  '10:30 PM',
-  '10:45 PM',
-  '11:00 PM',
-  '11:15 PM',
-  '11:30 PM',
-  '11:45 PM',
-]

package/lib/SelectField.d.ts

@@ -1,81 +0,0 @@
-import { DataTestProp } from '@hazelcast/helpers';
-import React, { FocusEvent, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
-import { GroupedOptionsType, Props as ReactSelectProps, OptionsType } from 'react-select';
-import { HelpProps } from './Help';
-import { IconProps } from './Icon';
-export declare type SelectFieldOption<V> = {
-    label: string;
-    value: V;
-};
-declare type RenderMenuFooterFunction = () => ReactNode;
-interface SelectFieldOptionsMap<V> {
-    [key: string]: SelectFieldOption<V>;
-}
-export declare type SelectFieldCoreStaticProps = {
-    name: string;
-    onBlur?: (e: FocusEvent<HTMLElement>) => void;
-    error?: string;
-};
-export declare type SelectFieldCoreDynamicProps<V> = {
-    isClearable: true;
-    isMulti?: false;
-    value: V | null;
-    onChange: (newValue: V | null) => void;
-} | {
-    isClearable?: false;
-    isMulti?: false;
-    value: V;
-    onChange: (newValue: V) => void;
-} | {
-    isMulti: true;
-    value: V[];
-    onChange: (newValue: V[]) => void;
-};
-declare type SelectFieldCreatableProps<V> = V extends string ? {
-    isCreatable?: boolean;
-} : {
-    isCreatable?: false;
-};
-export declare type SelectFieldIconLeftProps = {
-    iconLeft: IconProps['icon'];
-    iconLeftAriaLabel: string;
-    iconLeftClassName?: string;
-    iconLeftContainerClassName?: string;
-} | {
-    iconLeft?: never;
-    iconLeftAriaLabel?: never;
-    iconLeftClassName?: never;
-    iconLeftContainerClassName?: never;
-};
-export declare type SelectFieldExtraProps<V> = {
-    isCreatable?: boolean;
-    isClearable?: boolean;
-    options: GroupedOptionsType<SelectFieldOption<V>> | OptionsType<SelectFieldOption<V>>;
-    label: string;
-    showAriaLabel?: boolean;
-    helperText?: HelpProps['helperText'];
-    className?: string;
-    placeholder?: string;
-    labelClassName?: string;
-    errorClassName?: string;
-    menuPortalTarget?: 'body' | 'self' | HTMLElement | null;
-    formatGroupLabel?: ReactSelectProps<SelectFieldOption<V>>['formatGroupLabel'];
-    formatOptionLabel?: ReactSelectProps<SelectFieldOption<V>>['formatOptionLabel'];
-    renderMenuFooter?: RenderMenuFooterFunction;
-    styles?: ReactSelectProps<SelectFieldOption<V>>['styles'];
-} & DataTestProp & Pick<InputHTMLAttributes<HTMLElement>, 'autoFocus' | 'disabled' | 'required' | 'placeholder'> & Pick<ReactSelectProps, 'isSearchable' | 'menuIsOpen' | 'menuPlacement' | 'noOptionsMessage' | 'inputValue'> & SelectFieldIconLeftProps;
-export declare type SelectProps<V> = SelectFieldCoreStaticProps & SelectFieldCoreDynamicProps<V> & SelectFieldExtraProps<V> & SelectFieldCreatableProps<V>;
-declare type GetSelectedOptionFromValueProps<V> = {
-    value: V | V[] | null;
-    optionsMap: SelectFieldOptionsMap<V>;
-    isMulti: boolean;
-};
-/**
- * Transforms the value passed to our Select component so that it's in a format as underlying react-select expects
- * @param value - single value or an array of values
- * @param optionsMap - an object where option values are mapped to react-select expected objects
- * @param isMulti - boolean indicating whether we're in a multiple mode or not
- */
-export declare function getSelectedOptionFromValue<V extends string | number>({ value, optionsMap, isMulti, }: GetSelectedOptionFromValueProps<V>): SelectFieldOption<V> | SelectFieldOption<V>[] | null;
-export declare const SelectField: <V extends React.ReactText = string>({ "data-test": dataTest, className, disabled, error, errorClassName, helperText, isClearable, isCreatable, isMulti, isSearchable, label, labelClassName, showAriaLabel, menuPortalTarget, menuPlacement, name, onChange, options, placeholder, required, value, formatGroupLabel, formatOptionLabel, renderMenuFooter, ...iconAndRest }: SelectProps<V>) => React.ReactElement<SelectProps<V>, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
-export {};