@peculiar/react-components 0.6.7 → 1.1.0-alpha.0

package/dist/esnext/hooks/use_outside_click.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_outside_click.js","sourceRoot":"","sources":["../../../src/hooks/use_outside_click.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAAkB,EAAE,EAAE;IACpD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAE/B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACxC,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBACtD,QAAQ,EAAE,CAAC;aACZ;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;QAEtD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;QAC3D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpB,OAAO,GAAG,CAAC;AACb,CAAC,CAAC"}

package/dist/esnext/index.js

@@ -20,9 +20,9 @@ export * from './Popper';
 export * from './Popover';
 export * from './Portal';
 export * from './Radio';
-export * from './Select';
+export * from './NativeSelect';
 export * from './Skeleton';
-export * from './Autocomplete';
+export * from './Select';
 export * from './Slide';
 export * from './Slider';
 export * from './Switch';

package/dist/esnext/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC"}

package/dist/types/Autocomplete/autocomplete.d.ts

@@ -43,10 +43,6 @@ export declare type AutocompleteOwnProps<T, Multiple extends boolean | undefined
      * The maximum number of tags that will be visible when not focused.
      */
     limitTags?: number;
-    /**
-     * If `true`, the popup search input will be hidden.
-     */
-    disableSearch?: boolean;
     /**
      * If `true`, the autocomplete will be disabled.
      */
@@ -59,10 +55,6 @@ export declare type AutocompleteOwnProps<T, Multiple extends boolean | undefined
      * If `true`, the `input` element is required.
      */
     required?: boolean;
-    /**
-     * Text to display when in the create button element.
-     */
-    createOptionText?: string;
     /**
      * If `true`, the create button element will be shown.
      */
@@ -80,6 +72,10 @@ export declare type AutocompleteOwnProps<T, Multiple extends boolean | undefined
      * Render the option, use `getOptionLabel` by default.
      */
     renderOption?: (props: object, option: T) => React.ReactNode;
+    /**
+     * Render the tags elements.
+     */
+    renderTag?: (props: object, option: T) => React.ReactNode;
     /**
      * The label to display when the tags are truncated (`limitTags`).
      */
@@ -95,14 +91,11 @@ export declare type AutocompleteOwnProps<T, Multiple extends boolean | undefined
 export declare const Autocomplete: {
     <T, Multiple extends boolean = false>(props: AutocompleteOwnProps<T, Multiple>): JSX.Element;
     defaultProps: {
-        disableSearch: boolean;
         noOptionsText: string;
         loading: boolean;
         loadingText: string;
-        limitTags: number;
         required: boolean;
         allowCreateOption: boolean;
-        createOptionText: string;
         size: string;
     };
 };

package/dist/types/NativeSelect/index.d.ts

@@ -0,0 +1 @@
+export { NativeSelect } from './native_select';

package/dist/types/NativeSelect/native_select.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+/**
+ * Types.
+ */
+declare type NativeSelectOwnProps = {
+    options: {
+        value: string;
+        label: string;
+    }[];
+    /**
+     * If `true`, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the select.
+     */
+    size?: ('small' | 'medium' | 'large');
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    /**
+     * Attributes applied to the `input` element.
+     */
+    inputProps?: React.SelectHTMLAttributes<HTMLSelectElement>;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: string;
+    /**
+     * The id of the `input` element.
+     */
+    id?: string;
+    /**
+     * The label of the input. It is only used for layout.
+     */
+    label?: string;
+    /**
+     * The value of the `input` element, required for a controlled component.
+     */
+    value?: string;
+    /**
+     * The short hint displayed in the `input` before the user enters a value.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the `input` element is required.
+     */
+    required?: boolean;
+    /**
+     * Name attribute of the `input` element.
+     */
+    name?: string;
+    /**
+     * Pass a ref to the `input` element.
+     */
+    inputRef?: React.ForwardedRef<HTMLSelectElement>;
+    /**
+     * If `true`, the `input` element is focused during the first mount.
+     */
+    autoFocus?: boolean;
+    /**
+     * If `true`, the `input` will indicate an error.
+     */
+    error?: boolean;
+    errorText?: string;
+    /**
+     * Callback fired when the value is changed.
+     */
+    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+};
+/**
+ *
+ */
+export declare const NativeSelect: React.ForwardRefExoticComponent<NativeSelectOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/Select/select.d.ts

@@ -1,76 +1,108 @@
-import * as React from 'react';
+import React from 'react';
+import { UseAutocompleteProps, UseAutocompleteReturnType, AutocompleteValue } from '../hooks';
 /**
  * Types.
  */
-declare type SelectOwnProps = {
-    options: {
-        value: string;
-        label: string;
-    }[];
+export declare type SelectRenderGroupParams = {
+    key: string | number;
+    group: string;
+    children?: React.ReactNode;
+};
+export declare type SelectOwnProps<T, Multiple extends boolean | undefined = undefined> = UseAutocompleteProps<T, Multiple> & {
     /**
-     * If `true`, the component is disabled.
+     * The className of the component.
      */
-    disabled?: boolean;
+    className?: string;
     /**
-     * The size of the select.
+     * The size of the root component.
      */
     size?: ('small' | 'medium' | 'large');
     /**
-     * The className of the component.
+     * The short hint displayed in the `input` before the user enters a value.
      */
-    className?: string;
+    placeholder?: string;
     /**
-     * Attributes applied to the `input` element.
+     * The label content.
      */
-    inputProps?: React.SelectHTMLAttributes<HTMLSelectElement>;
+    label?: string;
     /**
-     * The default value. Use when the component is not controlled.
+     * Text to display when there are no options.
      */
-    defaultValue?: string;
+    noOptionsText?: React.ReactNode;
     /**
-     * The id of the `input` element.
+     * If `true`, the component is in a loading state.
+     * This shows the `loadingText` in place of suggestions (only if there are no
+     * suggestions to show, e.g. `options` are empty).
      */
-    id?: string;
+    loading?: boolean;
     /**
-     * The label of the input. It is only used for layout.
+     * Text to display when in a loading state.
      */
-    label?: string;
+    loadingText?: React.ReactNode;
     /**
-     * The value of the `input` element, required for a controlled component.
+     * The maximum number of tags that will be visible when not focused.
      */
-    value?: string;
+    limitTags?: number;
     /**
-     * The short hint displayed in the `input` before the user enters a value.
+     * If `true`, the popup search input will be hidden.
      */
-    placeholder?: string;
+    disableSearch?: boolean;
     /**
-     * If `true`, the `input` element is required.
+     * If `true`, the autocomplete will be disabled.
      */
-    required?: boolean;
+    disabled?: boolean;
     /**
      * Name attribute of the `input` element.
      */
     name?: string;
     /**
-     * Pass a ref to the `input` element.
+     * If `true`, the `input` element is required.
      */
-    inputRef?: React.ForwardedRef<HTMLSelectElement>;
+    required?: boolean;
     /**
-     * If `true`, the `input` element is focused during the first mount.
+     * Text to display when in the create button element.
      */
-    autoFocus?: boolean;
+    createOptionText?: string;
+    /**
+     * If `true`, the create button element will be shown.
+     */
+    allowCreateOption?: boolean;
     /**
      * If `true`, the `input` will indicate an error.
      */
     error?: boolean;
     errorText?: string;
     /**
-     * Callback fired when the value is changed.
+     * Render the root element.
      */
-    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    renderRoot?: (props: object, value: AutocompleteValue<T, Multiple>, getTagProps: UseAutocompleteReturnType<T, Multiple>['getTagProps']) => React.ReactNode;
+    /**
+     * Render the option, use `getOptionLabel` by default.
+     */
+    renderOption?: (props: object, option: T) => React.ReactNode;
+    /**
+     * The label to display when the tags are truncated (`limitTags`).
+     */
+    getLimitTagsText?: (more: number) => string;
+    /**
+     * Callback fired when the create button clicked.
+     */
+    onCreate?: (event: React.SyntheticEvent, value: string) => void;
 };
 /**
  *
  */
-export declare const Select: React.ForwardRefExoticComponent<SelectOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>>;
-export {};
+export declare const Select: {
+    <T, Multiple extends boolean = false>(props: SelectOwnProps<T, Multiple>): JSX.Element;
+    defaultProps: {
+        disableSearch: boolean;
+        noOptionsText: string;
+        loading: boolean;
+        loadingText: string;
+        limitTags: number;
+        required: boolean;
+        allowCreateOption: boolean;
+        createOptionText: string;
+        size: string;
+    };
+};

package/dist/types/hooks/index.d.ts

@@ -12,3 +12,4 @@ export type { UseAutocompleteProps, UseAutocompleteReturnType, AutocompleteValue
 export { useEventCallback } from './use_event_callback';
 export { useEnhancedEffect } from './use_enhanced_effect';
 export { useDebounceCallback } from './use_debounce_callback';
+export { useOutsideClick } from './use_outside_click';

package/dist/types/hooks/use_autocomplete.d.ts

@@ -98,7 +98,10 @@ export declare type UseAutocompleteReturnType<T, Multiple extends boolean | unde
     getInputLabelProps: () => React.HTMLAttributes<HTMLLabelElement>;
     getRootProps: () => React.HTMLAttributes<HTMLDivElement>;
     getInputProps: () => React.HTMLAttributes<HTMLInputElement>;
-    getClearProps: () => React.HTMLAttributes<HTMLDivElement>;
+    getClearProps: () => {
+        tabIndex: -1;
+        onClick: (event: React.SyntheticEvent) => void;
+    };
     getPopoverProps: () => Pick<Required<PopoverProps>, 'open' | 'anchorEl' | 'onClose' | 'onKeyDown'>;
     getTagProps: (option: T, index: number) => {
         key: number;

package/dist/types/hooks/use_outside_click.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useOutsideClick: (callback: Function) => React.MutableRefObject<any>;

package/dist/types/index.d.ts

@@ -20,9 +20,9 @@ export * from './Popper';
 export * from './Popover';
 export * from './Portal';
 export * from './Radio';
-export * from './Select';
+export * from './NativeSelect';
 export * from './Skeleton';
-export * from './Autocomplete';
+export * from './Select';
 export * from './Slide';
 export * from './Slider';
 export * from './Switch';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peculiar/react-components",
   "private": false,
-  "version": "0.6.7",
+  "version": "1.1.0-alpha.0",
   "author": "PeculiarVentures Team",
   "description": "A simple and customizable component library to build faster, beautiful, and more accessible React applications.",
   "keywords": [
@@ -48,7 +48,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@peculiar/color": "^0.1.3",
+    "@peculiar/color": "^0.1.4",
     "@popperjs/core": "^2.11.7",
     "@types/flat": "^5.0.2",
     "@types/react-transition-group": "^4.4.5",
@@ -72,14 +72,14 @@
     "storybook": "7.6.7",
     "storybook-dark-mode": "^3.0.3",
     "typescript": "^4.6.3",
-    "vite": "^5.0.8"
+    "vite": "^5.4.8"
   },
   "publishConfig": {
     "access": "public"
   },
   "engines": {
-    "node": ">=12.x"
+    "node": ">=18.x"
   },
   "license": "MIT",
-  "gitHead": "3b5136cc8aec8d4a2bcb9b2a5928ffef5f5f4843"
+  "gitHead": "0784e5b060ee118e92243b34520dd30a6e384279"
 }