@uxf/ui 1.0.0-beta.106 → 1.0.0-beta.108

package/chip/theme.d.ts

@@ -1,12 +1,13 @@
 export interface ChipColors {
-    default: true;
+    orange: true;
     red: true;
     yellow: true;
+    pink: true;
+    purple: true;
+    indigo: true;
     green: true;
     blue: true;
-    indigo: true;
-    purple: true;
-    pink: true;
+    default: true;
 }
 export interface ChipSizes {
     default: true;

package/combobox/combobox.d.ts

@@ -20,6 +20,7 @@ export interface ComboboxProps<ValueId = ComboboxValueId, Option = ComboboxOptio
     keyExtractor?: (option: Option) => string | number;
     label: string;
     loadOptions?: (query: string) => Promise<Option[]>;
+    notFoundMessage?: string;
     options?: Option[];
     placeholder?: string;
     renderOption?: (option: Option) => ReactNode;

package/combobox/combobox.js

@@ -38,7 +38,7 @@ const label_1 = require("../label");
 const use_async_loading_1 = require("../hooks/use-async-loading");
 // TODO make the component generic ComboboxProps<T>
 exports.Combobox = (0, forwardRef_1.forwardRef)("Combobox", (props, ref) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const generatedId = (0, react_2.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const isAsync = !!props.loadOptions;
@@ -52,14 +52,15 @@ exports.Combobox = (0, forwardRef_1.forwardRef)("Combobox", (props, ref) => {
     const dropdown = (0, use_dropdown_1.useDropdown)((_c = props.dropdownPlacement) !== null && _c !== void 0 ? _c : "bottom", true);
     const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
     const iconName = (_d = props.iconName) !== null && _d !== void 0 ? _d : "chevronDown";
+    const emptyMessage = (_e = props.notFoundMessage) !== null && _e !== void 0 ? _e : "Nic nenalezeno";
     return (react_2.default.createElement(react_1.Combobox, { as: "div", className: (0, cx_1.cx)("uxf-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
         react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
         react_2.default.createElement(react_1.Combobox.Button, { as: "div", className: (0, cx_1.cx)("uxf-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && classes_1.CLASSES.IS_OPEN), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
             react_2.default.createElement(react_1.Combobox.Input, { className: (0, cx_1.cx)("uxf-combobox__input"), displayValue: (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; }, onBlur: props.onBlur, onChange: (event) => setQuery(event.target.value), placeholder: props.placeholder, ref: stableRef, type: "text" }),
             react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select__button-icon", renderProps.open && "is-open"), name: iconName })),
-        react_2.default.createElement(react_1.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.floating }, filteredData.map((option) => {
+        react_2.default.createElement(react_1.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.floating }, filteredData.length > 0 ? (filteredData.map((option) => {
             var _a, _b, _c, _d;
             return (react_2.default.createElement(react_1.Combobox.Option, { key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id, value: option, className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED) }, (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.label));
-        })),
+        })) : (react_2.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, emptyMessage))),
         props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText))))));
 });

package/css/chip.css

@@ -1,5 +1,5 @@
 .uxf-chip {
-    @apply inline-flex items-center rounded py-0.5 px-2 text-xs font-medium max-w-full;
+    @apply inline-flex items-center rounded py-0.5 px-2 text-xs max-w-full;
 
     &.has-button {
         @apply pr-1;
@@ -27,7 +27,7 @@
 
     &--color-default {
         :root .light & {
-            @apply text-gray-600 bg-gray-100;
+            @apply text-gray-700 bg-gray-100;
 
             .uxf-chip__button {
                 @apply hover:bg-gray-200;
@@ -35,17 +35,35 @@
         }
 
         :root .dark & {
-            @apply text-white bg-gray-600;
+            @apply text-gray-100 bg-gray-700;
 
             .uxf-chip__button {
-                @apply hover:bg-gray-700;
+                @apply hover:bg-gray-800;
+            }
+        }
+    }
+
+    &--color-orange {
+        :root .light & {
+            @apply text-orange-700 bg-orange-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-orange-200;
+            }
+        }
+
+        :root .dark & {
+            @apply text-orange-100 bg-orange-700;
+
+            .uxf-chip__button {
+                @apply hover:bg-orange-800;
             }
         }
     }
 
     &--color-red {
         :root .light & {
-            @apply text-red-600 bg-red-100;
+            @apply text-red-700 bg-red-100;
 
             .uxf-chip__button {
                 @apply hover:bg-red-200;
@@ -53,17 +71,17 @@
         }
 
         :root .dark & {
-            @apply text-white bg-red-600;
+            @apply text-red-100 bg-red-700;
 
             .uxf-chip__button {
-                @apply hover:bg-red-700;
+                @apply hover:bg-red-800;
             }
         }
     }
 
     &--color-yellow {
         :root .light & {
-            @apply text-yellow-600 bg-yellow-100;
+            @apply text-yellow-700 bg-yellow-100;
 
             .uxf-chip__button {
                 @apply hover:bg-yellow-200;
@@ -71,17 +89,17 @@
         }
 
         :root .dark & {
-            @apply text-white bg-yellow-600;
+            @apply text-yellow-100 bg-yellow-700;
 
             .uxf-chip__button {
-                @apply hover:bg-yellow-700;
+                @apply hover:bg-yellow-800;
             }
         }
     }
 
     &--color-green {
         :root .light & {
-            @apply text-green-600 bg-green-100;
+            @apply text-green-700 bg-green-100;
 
             .uxf-chip__button {
                 @apply hover:bg-green-200;
@@ -89,17 +107,17 @@
         }
 
         :root .dark & {
-            @apply text-white bg-green-600;
+            @apply text-green-100 bg-green-700;
 
             .uxf-chip__button {
-                @apply hover:bg-green-700;
+                @apply hover:bg-green-800;
             }
         }
     }
 
     &--color-blue {
         :root .light & {
-            @apply text-blue-600 bg-blue-100;
+            @apply text-blue-700 bg-blue-100;
 
             .uxf-chip__button {
                 @apply hover:bg-blue-200;
@@ -107,17 +125,17 @@
         }
 
         :root .dark & {
-            @apply text-white bg-blue-600;
+            @apply text-blue-100 bg-blue-700;
 
             .uxf-chip__button {
-                @apply hover:bg-blue-700;
+                @apply hover:bg-blue-800;
             }
         }
     }
 
     &--color-indigo {
         :root .light & {
-            @apply text-indigo-600 bg-indigo-100;
+            @apply text-indigo-700 bg-indigo-100;
 
             .uxf-chip__button {
                 @apply hover:bg-indigo-200;
@@ -125,17 +143,17 @@
         }
 
         :root .dark & {
-            @apply text-white bg-indigo-600;
+            @apply text-indigo-100 bg-indigo-700;
 
             .uxf-chip__button {
-                @apply hover:bg-indigo-700;
+                @apply hover:bg-indigo-800;
             }
         }
     }
 
     &--color-purple {
         :root .light & {
-            @apply text-purple-600 bg-purple-100;
+            @apply text-purple-700 bg-purple-100;
 
             .uxf-chip__button {
                 @apply hover:bg-purple-200;
@@ -143,17 +161,17 @@
         }
 
         :root .dark & {
-            @apply text-white bg-purple-600;
+            @apply text-purple-100 bg-purple-700;
 
             .uxf-chip__button {
-                @apply hover:bg-purple-700;
+                @apply hover:bg-purple-800;
             }
         }
     }
 
     &--color-pink {
         :root .light & {
-            @apply text-pink-600 bg-pink-100;
+            @apply text-pink-700 bg-pink-100;
 
             .uxf-chip__button {
                 @apply hover:bg-pink-200;
@@ -161,10 +179,10 @@
         }
 
         :root .dark & {
-            @apply text-white bg-pink-600;
+            @apply text-pink-100 bg-pink-700;
 
             .uxf-chip__button {
-                @apply hover:bg-pink-700;
+                @apply hover:bg-pink-800;
             }
         }
     }

package/css/dropdown.css

@@ -21,4 +21,8 @@
     &__items {
         @apply absolute flex flex-col border border-black bg-white;
     }
+
+    &__empty-wrapper {
+        @apply py-2 px-4 text-gray-800;
+    }
 }

package/css/textarea.css

@@ -3,11 +3,11 @@
         @apply rounded-md text-base border p-2 shadow-sm;
 
         :root .light & {
-            @apply text-gray-900 border-gray-200;
+            @apply bg-white text-gray-900 border-gray-200;
         }
 
         :root .dark & {
-            @apply text-gray-300 border-gray-700;
+            @apply bg-gray-800 text-gray-300 border-gray-700;
         }
     }
 

package/dropzone/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export { DropzoneInputProps } from "./dropzone-input";
-export { DropzoneListProps } from "./dropzone-list";
+export type { DropzoneInputProps } from "./dropzone-input";
+export type { DropzoneListProps } from "./dropzone-list";
 export declare const Dropzone: import("react").ForwardRefExoticComponent<import("./dropzone-input").DropzoneInputProps & import("react").RefAttributes<HTMLDivElement>> & {
     List: import("react").FC<import("./dropzone-list").DropzoneListProps>;
 };

package/mutli-combobox/multi-combobox.d.ts

@@ -13,6 +13,7 @@ export interface MultiComboboxOption<ValueId = MultiComboboxValueId> extends Mul
     disabled?: boolean;
 }
 export interface MultiComboboxProps<ValueId = MultiComboboxValueId, Option = MultiComboboxOption<ValueId>> extends FormControlProps<Option[] | null> {
+    allOptionsSelectedMessage?: string;
     className?: string;
     dropdownPlacement?: Placement;
     helperText?: ReactNode;
@@ -22,6 +23,7 @@ export interface MultiComboboxProps<ValueId = MultiComboboxValueId, Option = Mul
     keyExtractor?: (option: Option) => string | number;
     label: string;
     loadOptions?: (query: string) => Promise<Option[]>;
+    notFoundMessage?: string;
     options?: Option[];
     placeholder?: string;
     renderOption?: (option: Option) => ReactNode;

package/mutli-combobox/multi-combobox.js

@@ -39,7 +39,7 @@ const icon_1 = require("../icon");
 const label_1 = require("../label");
 const use_async_loading_1 = require("../hooks/use-async-loading");
 exports.MultiCombobox = (0, forwardRef_1.forwardRef)("MultiCombobox", (props, ref) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     const generatedId = (0, react_2.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const isAsync = !!props.loadOptions;
@@ -86,16 +86,19 @@ exports.MultiCombobox = (0, forwardRef_1.forwardRef)("MultiCombobox", (props, re
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.map((option) => option));
         setQuery("");
     };
+    const emptyMessage = selectedOptions.length === options.length
+        ? (_f = props.allOptionsSelectedMessage) !== null && _f !== void 0 ? _f : "Všechny možnosti jsou již vybrány"
+        : (_g = props.notFoundMessage) !== null && _g !== void 0 ? _g : "Nic nenalezeno";
     return (react_2.default.createElement(react_1.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleComboboxValueChange, value: selectedOptions }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
         react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
         react_2.default.createElement(react_1.Combobox.Button, { as: "div", className: (0, cx_1.cx)("uxf-multi-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && classes_1.CLASSES.IS_OPEN), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
             selectedOptions.map((item) => (react_2.default.createElement(chip_1.Chip, { className: "mr-2 mt-2", color: item.color, key: item.id, onClose: handleRemove(item.id), size: "large" }, item.label))),
             react_2.default.createElement(react_1.Combobox.Input, { className: (0, cx_1.cx)("uxf-multi-combobox__input", "mt-2"), onBlur: props.onBlur, onChange: handleInputChange, onKeyDown: handleInputKeyDown, placeholder: props.placeholder, ref: stableRef, type: "text", value: query }),
             react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select__button-icon", renderProps.open && "is-open"), name: iconName })),
-        react_2.default.createElement(react_1.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.floating }, filteredData.map((option) => {
+        react_2.default.createElement(react_1.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.floating }, filteredData.length > 0 ? (filteredData.map((option) => {
             var _a, _b, _c, _d;
             const label = (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.label;
             return (react_2.default.createElement(react_1.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && !props.withCheckboxes && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: (_d = (_c = props.keyExtractor) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.id, value: option }, (optionState) => (react_2.default.createElement(react_2.default.Fragment, null, props.withCheckboxes ? (react_2.default.createElement(checkbox_1.Checkbox, { isDisabled: optionState.disabled, isFocused: optionState.active, label: label, onChange: handleCheckboxChange(option.id), value: optionState.selected })) : (label)))));
-        })),
+        })) : (react_2.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, emptyMessage))),
         props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText))))));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.106",
+  "version": "1.0.0-beta.108",
   "description": "",
   "publishConfig": {
     "access": "public"

package/paper/paper.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+export interface PaperProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
-export declare const Paper: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Paper: React.ForwardRefExoticComponent<PaperProps & React.RefAttributes<HTMLDivElement>>;

package/paper/paper.stories.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./paper").BadgeProps & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<import("./paper").PaperProps & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;
 export declare function Default(): JSX.Element;

package/utils/storybook-config.js

@@ -32,7 +32,7 @@ exports.defaultConfig = {
         variants: ["default", "outlined", "white", "text"],
     },
     Chip: {
-        colors: ["default", "red", "yellow", "green", "blue", "indigo", "purple", "pink"],
+        colors: ["orange", "red", "yellow", "pink", "purple", "indigo", "green", "blue", "default"],
     },
     Input: {
         sizes: ["small", "default", "large"],