@dhis2-ui/select 8.14.9 → 8.15.0-alpha.1

package/build/cjs/locales/index.js

@@ -57,17 +57,15 @@ var _translations24 = _interopRequireDefault(require("./uk/translations.json"));
 
 var _translations25 = _interopRequireDefault(require("./ur/translations.json"));
 
-var _translations26 = _interopRequireDefault(require("./uz_Latn/translations.json"));
+var _translations26 = _interopRequireDefault(require("./uz/translations.json"));
 
-var _translations27 = _interopRequireDefault(require("./uz_UZ_Cyrl/translations.json"));
+var _translations27 = _interopRequireDefault(require("./uz_Latn/translations.json"));
 
-var _translations28 = _interopRequireDefault(require("./uz_UZ_Latn/translations.json"));
+var _translations28 = _interopRequireDefault(require("./vi/translations.json"));
 
-var _translations29 = _interopRequireDefault(require("./vi/translations.json"));
+var _translations29 = _interopRequireDefault(require("./zh/translations.json"));
 
-var _translations30 = _interopRequireDefault(require("./zh/translations.json"));
-
-var _translations31 = _interopRequireDefault(require("./zh_CN/translations.json"));
+var _translations30 = _interopRequireDefault(require("./zh_CN/translations.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -131,17 +129,15 @@ _d2I18n.default.addResources('uk', namespace, _translations24.default);
 
 _d2I18n.default.addResources('ur', namespace, _translations25.default);
 
-_d2I18n.default.addResources('uz_Latn', namespace, _translations26.default);
-
-_d2I18n.default.addResources('uz_UZ_Cyrl', namespace, _translations27.default);
+_d2I18n.default.addResources('uz', namespace, _translations26.default);
 
-_d2I18n.default.addResources('uz_UZ_Latn', namespace, _translations28.default);
+_d2I18n.default.addResources('uz_Latn', namespace, _translations27.default);
 
-_d2I18n.default.addResources('vi', namespace, _translations29.default);
+_d2I18n.default.addResources('vi', namespace, _translations28.default);
 
-_d2I18n.default.addResources('zh', namespace, _translations30.default);
+_d2I18n.default.addResources('zh', namespace, _translations29.default);
 
-_d2I18n.default.addResources('zh_CN', namespace, _translations31.default);
+_d2I18n.default.addResources('zh_CN', namespace, _translations30.default);
 
 var _default = _d2I18n.default;
 exports.default = _default;

package/build/es/locales/index.js

@@ -32,9 +32,8 @@ import tetTranslations from './tet/translations.json';
 import tgTranslations from './tg/translations.json';
 import ukTranslations from './uk/translations.json';
 import urTranslations from './ur/translations.json';
+import uzTranslations from './uz/translations.json';
 import uz_LatnTranslations from './uz_Latn/translations.json';
-import uz_UZ_CyrlTranslations from './uz_UZ_Cyrl/translations.json';
-import uz_UZ_LatnTranslations from './uz_UZ_Latn/translations.json';
 import viTranslations from './vi/translations.json';
 import zhTranslations from './zh/translations.json';
 import zh_CNTranslations from './zh_CN/translations.json';
@@ -64,9 +63,8 @@ i18n.addResources('tet', namespace, tetTranslations);
 i18n.addResources('tg', namespace, tgTranslations);
 i18n.addResources('uk', namespace, ukTranslations);
 i18n.addResources('ur', namespace, urTranslations);
+i18n.addResources('uz', namespace, uzTranslations);
 i18n.addResources('uz_Latn', namespace, uz_LatnTranslations);
-i18n.addResources('uz_UZ_Cyrl', namespace, uz_UZ_CyrlTranslations);
-i18n.addResources('uz_UZ_Latn', namespace, uz_UZ_LatnTranslations);
 i18n.addResources('vi', namespace, viTranslations);
 i18n.addResources('zh', namespace, zhTranslations);
 i18n.addResources('zh_CN', namespace, zh_CNTranslations);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/select",
-    "version": "8.14.9",
+    "version": "8.15.0-alpha.1",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -33,29 +33,31 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "8.14.9",
-        "@dhis2-ui/button": "8.14.9",
-        "@dhis2-ui/card": "8.14.9",
-        "@dhis2-ui/checkbox": "8.14.9",
-        "@dhis2-ui/chip": "8.14.9",
-        "@dhis2-ui/field": "8.14.9",
-        "@dhis2-ui/input": "8.14.9",
-        "@dhis2-ui/layer": "8.14.9",
-        "@dhis2-ui/loader": "8.14.9",
-        "@dhis2-ui/popper": "8.14.9",
-        "@dhis2-ui/status-icon": "8.14.9",
-        "@dhis2/ui-constants": "8.14.9",
-        "@dhis2/ui-icons": "8.14.9",
+        "@dhis2-ui/box": "8.15.0-alpha.1",
+        "@dhis2-ui/button": "8.15.0-alpha.1",
+        "@dhis2-ui/card": "8.15.0-alpha.1",
+        "@dhis2-ui/checkbox": "8.15.0-alpha.1",
+        "@dhis2-ui/chip": "8.15.0-alpha.1",
+        "@dhis2-ui/field": "8.15.0-alpha.1",
+        "@dhis2-ui/input": "8.15.0-alpha.1",
+        "@dhis2-ui/layer": "8.15.0-alpha.1",
+        "@dhis2-ui/loader": "8.15.0-alpha.1",
+        "@dhis2-ui/popper": "8.15.0-alpha.1",
+        "@dhis2-ui/status-icon": "8.15.0-alpha.1",
+        "@dhis2/ui-constants": "8.15.0-alpha.1",
+        "@dhis2/ui-icons": "8.15.0-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "@dhis2/d2-i18n": "^1.1.0",
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }

package/types/index.d.ts

@@ -0,0 +1,419 @@
+import * as React from 'react'
+import { LayerBackdropClickEvent } from '@dhis2-ui/layer'
+import { CheckboxProps } from '@dhis2-ui/checkbox'
+
+interface BaseEventPayload {
+    selected: string | string[]
+}
+interface SingleSelectEventPayload extends BaseEventPayload {
+    selected: string
+}
+interface MultiSelectEventPayload extends BaseEventPayload {
+    selected: string[]
+}
+
+type SelectEventHandler<
+    T extends BaseEventPayload,
+    Event extends React.SyntheticEvent
+> = (payload: T, event: Event) => void
+
+type SelectOnBlurHandler<T extends BaseEventPayload> = SelectEventHandler<
+    T,
+    LayerBackdropClickEvent
+>
+type SelectOnFocusHandler<T extends BaseEventPayload> = SelectEventHandler<
+    T,
+    React.FocusEvent<HTMLDivElement>
+>
+type SelectKeyHandler<T extends BaseEventPayload> = SelectEventHandler<
+    T,
+    React.KeyboardEvent<HTMLDivElement>
+>
+type SelectChangeHandler<T extends BaseEventPayload> = SelectEventHandler<
+    T,
+    React.MouseEvent
+>
+
+export interface MultiSelectProps {
+    children?: React.ReactNode
+    className?: string
+    /**
+     * Required if `clearable` prop is `true`
+     */
+    clearText?: string
+    /**
+     * Adds a 'clear' option to the menu
+     */
+    clearable?: boolean
+    dataTest?: string
+    dense?: boolean
+    disabled?: boolean
+    empty?: React.ReactNode
+    error?: boolean
+    filterPlaceholder?: string
+    /**
+     * Adds a 'filter' field to the menu
+     */
+    filterable?: boolean
+    initialFocus?: boolean
+    inputMaxHeight?: string
+    loading?: boolean
+    loadingText?: string
+    maxHeight?: string
+    /**
+     * Required if `filterable` prop is `true`
+     */
+    noMatchText?: string
+    placeholder?: string
+    prefix?: string
+    selected?: string[]
+    tabIndex?: string
+    valid?: boolean
+    warning?: boolean
+    onBlur?: SelectOnBlurHandler<MultiSelectEventPayload>
+    onChange?: SelectChangeHandler<MultiSelectEventPayload>
+    onFocus?: SelectOnFocusHandler<MultiSelectEventPayload>
+    onKeyDown?: SelectKeyHandler<MultiSelectEventPayload>
+}
+
+export const MultiSelect: React.FC<MultiSelectProps>
+
+type TranslateableProp = string | ((interpolationObject: any) => string)
+
+export interface MultiSelectFieldProps {
+    /**
+     * Should be `MultiSelectOption` components
+     */
+    children?: React.ReactNode
+    className?: string
+    /**
+     * Label for the button that clears selections
+     */
+    clearText?: TranslateableProp
+    /**
+     * Adds a button to the MultiSelect that clears selections when pressed
+     */
+    clearable?: boolean
+    dataTest?: string
+    /**
+     * Makes the MultiSelect smaller
+     */
+    dense?: boolean
+    /**
+     * Disables the MultiSelect
+     */
+    disabled?: boolean
+    /**
+     * Text to display when there are no options
+     */
+    empty?: TranslateableProp | React.ReactNode
+    /**
+     * Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props
+     */
+    error?: boolean
+    /**
+     * Placeholder text to show in the filter field when it is empty
+     */
+    filterPlaceholder?: TranslateableProp | React.ReactNode
+    /**
+     * Adds a field to filter options
+     */
+    filterable?: boolean
+    /**
+     * Useful guiding text to display below the MultiSelect
+     */
+    helpText?: string
+    /**
+     * Grabs initial focus on the page
+     */
+    initialFocus?: boolean
+    /**
+     * Constrains the height of the input
+     */
+    inputMaxHeight?: string
+    /**
+     * Sets the width of the input. Can be any valid CSS measurement
+     */
+    inputWidth?: string
+    /**
+     * Text for the label above the MultiSelect
+     */
+    label?: string
+    /**
+     * Applies a loading appearance to the dropdown options
+     */
+    loading?: boolean
+    /**
+     * Text to display when `loading` is true
+     */
+    loadingText?: TranslateableProp
+    /**
+     * Constrains height of the MultiSelect
+     */
+    maxHeight?: string
+    /**
+     * Text to display when there are no filter results
+     */
+    noMatchText?: TranslateableProp
+    /**
+     * Placeholder text when the MultiSelect is empty
+     */
+    placeholder?: string
+    /**
+     * Leading text to prefix selections
+     */
+    prefix?: string
+    /**
+     * Indicates that a selection is required
+     */
+    required?: boolean
+    /**
+     * Selected items in the MultiSelect (each string should refer to the item's `value` attribute)
+     */
+    selected?: string[]
+    tabIndex?: string
+    /**
+     * Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props
+     */
+    valid?: boolean
+    /**
+     * Text to provide form validation feedback. Receives styles according to validation status
+     */
+    validationText?: string
+    /**
+     * Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props
+     */
+    warning?: boolean
+    /**
+     * Called with signature `({ selected: [String] }, event)`
+     */
+    onBlur?: MultiSelectProps['onBlur']
+    /**
+     * Called with signature `({ selected: [String] }, event)`
+     */
+    onChange?: MultiSelectProps['onChange']
+    /**
+     * Called with signature `({ selected: [String] }, event)`
+     */
+    onFocus?: MultiSelectProps['onFocus']
+    /**
+     * Called with signature `({ selected: [String] }, event)`
+     */
+    onKeyDown?: MultiSelectProps['onKeyDown']
+}
+
+export class MultiSelectField extends React.Component<
+    MultiSelectFieldProps,
+    any
+> {
+    render(): JSX.Element
+}
+
+export interface MultiSelectOptionProps {
+    label: string
+    value: string
+    active?: boolean
+    className?: string
+    dataTest?: string
+    disabled?: boolean
+    onClick?: CheckboxProps['onChange']
+}
+
+export const MultiSelectOption: React.FC<MultiSelectOptionProps>
+
+export interface SingleSelectProps {
+    children?: React.ReactNode
+    className?: string
+    /**
+     * Text on button that clears selection. Required if `clearable` prop is true
+     */
+    clearText?: string
+    /**
+     * Adds a button to clear selection
+     */
+    clearable?: boolean
+    dataTest?: string
+    dense?: boolean
+    disabled?: boolean
+    /**
+     * Text or component to display when there are no options
+     */
+    empty?: React.ReactNode
+    /**
+     * Applies 'error' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props
+     */
+    error?: boolean
+    filterPlaceholder?: string
+    /**
+     * Adds a filter field to add text to filter options
+     */
+    filterable?: boolean
+    initialFocus?: boolean
+    inputMaxHeight?: string
+    loading?: boolean
+    loadingText?: string
+    maxHeight?: string
+    /**
+     * Text to show when filter returns no results. Required if `filterable` prop is true
+     */
+    noMatchText?: string
+    placeholder?: string
+    prefix?: string
+    selected?: string
+    tabIndex?: string
+    /**
+     * Applies 'valid' appearance for validation feedback. Mutually exclusive with `warning` and `error` props
+     */
+    valid?: boolean
+    /**
+     * Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props
+     */
+    warning?: boolean
+    onBlur?: SelectOnBlurHandler<SingleSelectEventPayload>
+    onChange?: SelectChangeHandler<SingleSelectEventPayload>
+    onFocus?: SelectOnFocusHandler<SingleSelectEventPayload>
+    onKeyDown?: SelectKeyHandler<SingleSelectEventPayload>
+}
+
+export const SingleSelect: React.FC<SingleSelectProps>
+
+export interface SingleSelectFieldProps {
+    /**
+     * Should be `SingleSelectOption` components
+     */
+    children?: React.ReactNode
+    className?: string
+    /**
+     * Label for the button that clears selections
+     */
+    clearText?: TranslateableProp
+    /**
+     * Adds a button to the SingleSelect that clears selections when pressed
+     */
+    clearable?: boolean
+    dataTest?: string
+    /**
+     * Makes the SingleSelect smaller
+     */
+    dense?: boolean
+    /**
+     * Disables the SingleSelect
+     */
+    disabled?: boolean
+    /**
+     * Text to display when there are no options
+     */
+    empty?: TranslateableProp | React.ReactNode
+    /**
+     * Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props
+     */
+    error?: boolean
+    /**
+     * Placeholder text to show in the filter field when it is empty
+     */
+    filterPlaceholder?: TranslateableProp | React.ReactNode
+    /**
+     * Adds a field to filter options
+     */
+    filterable?: boolean
+    /**
+     * Useful guiding text to display below the SingleSelect
+     */
+    helpText?: string
+    /**
+     * Grabs initial focus on the page
+     */
+    initialFocus?: boolean
+    /**
+     * Constrains the height of the input
+     */
+    inputMaxHeight?: string
+    /**
+     * Sets the width of the input. Can be any valid CSS measurement
+     */
+    inputWidth?: string
+    /**
+     * Text for the label above the SingleSelect
+     */
+    label?: string
+    /**
+     * Applies a loading appearance to the dropdown options
+     */
+    loading?: boolean
+    /**
+     * Text to display when `loading` is true
+     */
+    loadingText?: TranslateableProp
+    /**
+     * Constrains height of the SingleSelect
+     */
+    maxHeight?: string
+    /**
+     * Text to display when there are no filter results
+     */
+    noMatchText?: TranslateableProp
+    /**
+     * Placeholder text when the SingleSelect is empty
+     */
+    placeholder?: string
+    /**
+     * Leading text to prefix selections
+     */
+    prefix?: string
+    /**
+     * Indicates that a selection is required
+     */
+    required?: boolean
+    /**
+     * Selected item in the SingleSelect (the string should refer to the item's `value` attribute)
+     */
+    selected?: string
+    tabIndex?: string
+    /**
+     * Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props
+     */
+    valid?: boolean
+    /**
+     * Text to provide form validation feedback. Receives styles according to validation status
+     */
+    validationText?: string
+    /**
+     * Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props
+     */
+    warning?: boolean
+    /**
+     * Called with signature `({ selected: string }, event)`
+     */
+    onBlur?: SingleSelectProps['onBlur']
+    /**
+     * Called with signature `({ selected: string }, event)`
+     */
+    onChange?: SingleSelectProps['onChange']
+    /**
+     * Called with signature `({ selected: string }, event)`
+     */
+    onFocus?: SingleSelectProps['onFocus']
+    /**
+     * Called with signature `({ selected: string }, event)`
+     */
+    onKeyDown?: SingleSelectProps['onKeyDown']
+}
+
+export class SingleSelectField extends React.Component<
+    SingleSelectFieldProps,
+    any
+> {
+    render(): JSX.Element
+}
+
+export interface SingleSelectOptionProps {
+    label: string
+    value: string
+    active?: boolean
+    className?: string
+    dataTest?: string
+    disabled?: boolean
+    onClick?: (arg0: {}, event: React.MouseEvent<HTMLDivElement>) => void
+}
+
+export const SingleSelectOption: React.FC<SingleSelectOptionProps>

package/build/cjs/locales/uz_UZ_Latn/translations.json

@@ -1,7 +0,0 @@
-{
-    "Clear": "Аниқ",
-    "No data found": "Maʼlumotlar topilmadi",
-    "Type to filter options": "",
-    "Loading options": "",
-    "No options found": ""
-}

package/build/es/locales/uz_UZ_Latn/translations.json

@@ -1,7 +0,0 @@
-{
-    "Clear": "Аниқ",
-    "No data found": "Maʼlumotlar topilmadi",
-    "Type to filter options": "",
-    "Loading options": "",
-    "No options found": ""
-}