@vincentgraul/react-components 1.0.38 → 1.0.39

package/build/select/Select.d.ts

@@ -1,289 +0,0 @@
-import React, { ReactNode } from "react";
-interface Option {
-    id: number;
-    label: string | ReactNode;
-    value: string;
-}
-export type OptionWithoutId = Omit<Option, "id">;
-interface Props {
-    options: OptionWithoutId[];
-    selectedValue?: string;
-    onChange?: (option: Option) => void;
-    className?: string;
-}
-export default function Select(props: Props): import("react/jsx-runtime").JSX.Element;
-declare const Option: import("styled-components").IStyledComponent<"web", {
-    ref?: React.LegacyRef<HTMLLIElement>;
-    key?: React.Key;
-    value?: string | number | readonly string[];
-    defaultChecked?: boolean;
-    defaultValue?: string | number | readonly string[];
-    suppressContentEditableWarning?: boolean;
-    suppressHydrationWarning?: boolean;
-    accessKey?: string;
-    autoFocus?: boolean;
-    className?: string;
-    contentEditable?: "inherit" | (boolean | "true" | "false");
-    contextMenu?: string;
-    dir?: string;
-    draggable?: boolean | "true" | "false";
-    hidden?: boolean;
-    id?: string;
-    lang?: string;
-    nonce?: string;
-    placeholder?: string;
-    slot?: string;
-    spellCheck?: boolean | "true" | "false";
-    style?: React.CSSProperties;
-    tabIndex?: number;
-    title?: string;
-    translate?: "no" | "yes";
-    radioGroup?: string;
-    role?: React.AriaRole;
-    about?: string;
-    content?: string;
-    datatype?: string;
-    inlist?: any;
-    prefix?: string;
-    property?: string;
-    rel?: string;
-    resource?: string;
-    rev?: string;
-    typeof?: string;
-    vocab?: string;
-    autoCapitalize?: string;
-    autoCorrect?: string;
-    autoSave?: string;
-    color?: string;
-    itemProp?: string;
-    itemScope?: boolean;
-    itemType?: string;
-    itemID?: string;
-    itemRef?: string;
-    results?: number;
-    security?: string;
-    unselectable?: "off" | "on";
-    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
-    is?: string;
-    "aria-activedescendant"?: string;
-    "aria-atomic"?: boolean | "true" | "false";
-    "aria-autocomplete"?: "list" | "none" | "inline" | "both";
-    "aria-braillelabel"?: string;
-    "aria-brailleroledescription"?: string;
-    "aria-busy"?: boolean | "true" | "false";
-    "aria-checked"?: boolean | "true" | "false" | "mixed";
-    "aria-colcount"?: number;
-    "aria-colindex"?: number;
-    "aria-colindextext"?: string;
-    "aria-colspan"?: number;
-    "aria-controls"?: string;
-    "aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date";
-    "aria-describedby"?: string;
-    "aria-description"?: string;
-    "aria-details"?: string;
-    "aria-disabled"?: boolean | "true" | "false";
-    "aria-dropeffect"?: "link" | "copy" | "none" | "execute" | "move" | "popup";
-    "aria-errormessage"?: string;
-    "aria-expanded"?: boolean | "true" | "false";
-    "aria-flowto"?: string;
-    "aria-grabbed"?: boolean | "true" | "false";
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false";
-    "aria-hidden"?: boolean | "true" | "false";
-    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling";
-    "aria-keyshortcuts"?: string;
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    "aria-level"?: number;
-    "aria-live"?: "off" | "assertive" | "polite";
-    "aria-modal"?: boolean | "true" | "false";
-    "aria-multiline"?: boolean | "true" | "false";
-    "aria-multiselectable"?: boolean | "true" | "false";
-    "aria-orientation"?: "horizontal" | "vertical";
-    "aria-owns"?: string;
-    "aria-placeholder"?: string;
-    "aria-posinset"?: number;
-    "aria-pressed"?: boolean | "true" | "false" | "mixed";
-    "aria-readonly"?: boolean | "true" | "false";
-    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
-    "aria-required"?: boolean | "true" | "false";
-    "aria-roledescription"?: string;
-    "aria-rowcount"?: number;
-    "aria-rowindex"?: number;
-    "aria-rowindextext"?: string;
-    "aria-rowspan"?: number;
-    "aria-selected"?: boolean | "true" | "false";
-    "aria-setsize"?: number;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other";
-    "aria-valuemax"?: number;
-    "aria-valuemin"?: number;
-    "aria-valuenow"?: number;
-    "aria-valuetext"?: string;
-    children?: React.ReactNode;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    };
-    onCopy?: React.ClipboardEventHandler<HTMLLIElement>;
-    onCopyCapture?: React.ClipboardEventHandler<HTMLLIElement>;
-    onCut?: React.ClipboardEventHandler<HTMLLIElement>;
-    onCutCapture?: React.ClipboardEventHandler<HTMLLIElement>;
-    onPaste?: React.ClipboardEventHandler<HTMLLIElement>;
-    onPasteCapture?: React.ClipboardEventHandler<HTMLLIElement>;
-    onCompositionEnd?: React.CompositionEventHandler<HTMLLIElement>;
-    onCompositionEndCapture?: React.CompositionEventHandler<HTMLLIElement>;
-    onCompositionStart?: React.CompositionEventHandler<HTMLLIElement>;
-    onCompositionStartCapture?: React.CompositionEventHandler<HTMLLIElement>;
-    onCompositionUpdate?: React.CompositionEventHandler<HTMLLIElement>;
-    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLLIElement>;
-    onFocus?: React.FocusEventHandler<HTMLLIElement>;
-    onFocusCapture?: React.FocusEventHandler<HTMLLIElement>;
-    onBlur?: React.FocusEventHandler<HTMLLIElement>;
-    onBlurCapture?: React.FocusEventHandler<HTMLLIElement>;
-    onChange?: React.FormEventHandler<HTMLLIElement>;
-    onChangeCapture?: React.FormEventHandler<HTMLLIElement>;
-    onBeforeInput?: React.FormEventHandler<HTMLLIElement>;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLLIElement>;
-    onInput?: React.FormEventHandler<HTMLLIElement>;
-    onInputCapture?: React.FormEventHandler<HTMLLIElement>;
-    onReset?: React.FormEventHandler<HTMLLIElement>;
-    onResetCapture?: React.FormEventHandler<HTMLLIElement>;
-    onSubmit?: React.FormEventHandler<HTMLLIElement>;
-    onSubmitCapture?: React.FormEventHandler<HTMLLIElement>;
-    onInvalid?: React.FormEventHandler<HTMLLIElement>;
-    onInvalidCapture?: React.FormEventHandler<HTMLLIElement>;
-    onLoad?: React.ReactEventHandler<HTMLLIElement>;
-    onLoadCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onError?: React.ReactEventHandler<HTMLLIElement>;
-    onErrorCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLLIElement>;
-    onKeyDownCapture?: React.KeyboardEventHandler<HTMLLIElement>;
-    onKeyPress?: React.KeyboardEventHandler<HTMLLIElement>;
-    onKeyPressCapture?: React.KeyboardEventHandler<HTMLLIElement>;
-    onKeyUp?: React.KeyboardEventHandler<HTMLLIElement>;
-    onKeyUpCapture?: React.KeyboardEventHandler<HTMLLIElement>;
-    onAbort?: React.ReactEventHandler<HTMLLIElement>;
-    onAbortCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onCanPlay?: React.ReactEventHandler<HTMLLIElement>;
-    onCanPlayCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onCanPlayThrough?: React.ReactEventHandler<HTMLLIElement>;
-    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onDurationChange?: React.ReactEventHandler<HTMLLIElement>;
-    onDurationChangeCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onEmptied?: React.ReactEventHandler<HTMLLIElement>;
-    onEmptiedCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onEncrypted?: React.ReactEventHandler<HTMLLIElement>;
-    onEncryptedCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onEnded?: React.ReactEventHandler<HTMLLIElement>;
-    onEndedCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onLoadedData?: React.ReactEventHandler<HTMLLIElement>;
-    onLoadedDataCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onLoadedMetadata?: React.ReactEventHandler<HTMLLIElement>;
-    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onLoadStart?: React.ReactEventHandler<HTMLLIElement>;
-    onLoadStartCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onPause?: React.ReactEventHandler<HTMLLIElement>;
-    onPauseCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onPlay?: React.ReactEventHandler<HTMLLIElement>;
-    onPlayCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onPlaying?: React.ReactEventHandler<HTMLLIElement>;
-    onPlayingCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onProgress?: React.ReactEventHandler<HTMLLIElement>;
-    onProgressCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onRateChange?: React.ReactEventHandler<HTMLLIElement>;
-    onRateChangeCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onResize?: React.ReactEventHandler<HTMLLIElement>;
-    onResizeCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onSeeked?: React.ReactEventHandler<HTMLLIElement>;
-    onSeekedCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onSeeking?: React.ReactEventHandler<HTMLLIElement>;
-    onSeekingCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onStalled?: React.ReactEventHandler<HTMLLIElement>;
-    onStalledCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onSuspend?: React.ReactEventHandler<HTMLLIElement>;
-    onSuspendCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onTimeUpdate?: React.ReactEventHandler<HTMLLIElement>;
-    onTimeUpdateCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onVolumeChange?: React.ReactEventHandler<HTMLLIElement>;
-    onVolumeChangeCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onWaiting?: React.ReactEventHandler<HTMLLIElement>;
-    onWaitingCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onAuxClick?: React.MouseEventHandler<HTMLLIElement>;
-    onAuxClickCapture?: React.MouseEventHandler<HTMLLIElement>;
-    onClick?: React.MouseEventHandler<HTMLLIElement>;
-    onClickCapture?: React.MouseEventHandler<HTMLLIElement>;
-    onContextMenu?: React.MouseEventHandler<HTMLLIElement>;
-    onContextMenuCapture?: React.MouseEventHandler<HTMLLIElement>;
-    onDoubleClick?: React.MouseEventHandler<HTMLLIElement>;
-    onDoubleClickCapture?: React.MouseEventHandler<HTMLLIElement>;
-    onDrag?: React.DragEventHandler<HTMLLIElement>;
-    onDragCapture?: React.DragEventHandler<HTMLLIElement>;
-    onDragEnd?: React.DragEventHandler<HTMLLIElement>;
-    onDragEndCapture?: React.DragEventHandler<HTMLLIElement>;
-    onDragEnter?: React.DragEventHandler<HTMLLIElement>;
-    onDragEnterCapture?: React.DragEventHandler<HTMLLIElement>;
-    onDragExit?: React.DragEventHandler<HTMLLIElement>;
-    onDragExitCapture?: React.DragEventHandler<HTMLLIElement>;
-    onDragLeave?: React.DragEventHandler<HTMLLIElement>;
-    onDragLeaveCapture?: React.DragEventHandler<HTMLLIElement>;
-    onDragOver?: React.DragEventHandler<HTMLLIElement>;
-    onDragOverCapture?: React.DragEventHandler<HTMLLIElement>;
-    onDragStart?: React.DragEventHandler<HTMLLIElement>;
-    onDragStartCapture?: React.DragEventHandler<HTMLLIElement>;
-    onDrop?: React.DragEventHandler<HTMLLIElement>;
-    onDropCapture?: React.DragEventHandler<HTMLLIElement>;
-    onMouseDown?: React.MouseEventHandler<HTMLLIElement>;
-    onMouseDownCapture?: React.MouseEventHandler<HTMLLIElement>;
-    onMouseEnter?: React.MouseEventHandler<HTMLLIElement>;
-    onMouseLeave?: React.MouseEventHandler<HTMLLIElement>;
-    onMouseMove?: React.MouseEventHandler<HTMLLIElement>;
-    onMouseMoveCapture?: React.MouseEventHandler<HTMLLIElement>;
-    onMouseOut?: React.MouseEventHandler<HTMLLIElement>;
-    onMouseOutCapture?: React.MouseEventHandler<HTMLLIElement>;
-    onMouseOver?: React.MouseEventHandler<HTMLLIElement>;
-    onMouseOverCapture?: React.MouseEventHandler<HTMLLIElement>;
-    onMouseUp?: React.MouseEventHandler<HTMLLIElement>;
-    onMouseUpCapture?: React.MouseEventHandler<HTMLLIElement>;
-    onSelect?: React.ReactEventHandler<HTMLLIElement>;
-    onSelectCapture?: React.ReactEventHandler<HTMLLIElement>;
-    onTouchCancel?: React.TouchEventHandler<HTMLLIElement>;
-    onTouchCancelCapture?: React.TouchEventHandler<HTMLLIElement>;
-    onTouchEnd?: React.TouchEventHandler<HTMLLIElement>;
-    onTouchEndCapture?: React.TouchEventHandler<HTMLLIElement>;
-    onTouchMove?: React.TouchEventHandler<HTMLLIElement>;
-    onTouchMoveCapture?: React.TouchEventHandler<HTMLLIElement>;
-    onTouchStart?: React.TouchEventHandler<HTMLLIElement>;
-    onTouchStartCapture?: React.TouchEventHandler<HTMLLIElement>;
-    onPointerDown?: React.PointerEventHandler<HTMLLIElement>;
-    onPointerDownCapture?: React.PointerEventHandler<HTMLLIElement>;
-    onPointerMove?: React.PointerEventHandler<HTMLLIElement>;
-    onPointerMoveCapture?: React.PointerEventHandler<HTMLLIElement>;
-    onPointerUp?: React.PointerEventHandler<HTMLLIElement>;
-    onPointerUpCapture?: React.PointerEventHandler<HTMLLIElement>;
-    onPointerCancel?: React.PointerEventHandler<HTMLLIElement>;
-    onPointerCancelCapture?: React.PointerEventHandler<HTMLLIElement>;
-    onPointerEnter?: React.PointerEventHandler<HTMLLIElement>;
-    onPointerEnterCapture?: React.PointerEventHandler<HTMLLIElement>;
-    onPointerLeave?: React.PointerEventHandler<HTMLLIElement>;
-    onPointerLeaveCapture?: React.PointerEventHandler<HTMLLIElement>;
-    onPointerOver?: React.PointerEventHandler<HTMLLIElement>;
-    onPointerOverCapture?: React.PointerEventHandler<HTMLLIElement>;
-    onPointerOut?: React.PointerEventHandler<HTMLLIElement>;
-    onPointerOutCapture?: React.PointerEventHandler<HTMLLIElement>;
-    onGotPointerCapture?: React.PointerEventHandler<HTMLLIElement>;
-    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLLIElement>;
-    onLostPointerCapture?: React.PointerEventHandler<HTMLLIElement>;
-    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLLIElement>;
-    onScroll?: React.UIEventHandler<HTMLLIElement>;
-    onScrollCapture?: React.UIEventHandler<HTMLLIElement>;
-    onWheel?: React.WheelEventHandler<HTMLLIElement>;
-    onWheelCapture?: React.WheelEventHandler<HTMLLIElement>;
-    onAnimationStart?: React.AnimationEventHandler<HTMLLIElement>;
-    onAnimationStartCapture?: React.AnimationEventHandler<HTMLLIElement>;
-    onAnimationEnd?: React.AnimationEventHandler<HTMLLIElement>;
-    onAnimationEndCapture?: React.AnimationEventHandler<HTMLLIElement>;
-    onAnimationIteration?: React.AnimationEventHandler<HTMLLIElement>;
-    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLLIElement>;
-    onTransitionEnd?: React.TransitionEventHandler<HTMLLIElement>;
-    onTransitionEndCapture?: React.TransitionEventHandler<HTMLLIElement>;
-}>;
-export {};
-//# sourceMappingURL=Select.d.ts.map

package/build/select/Select.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAKtE,UAAU,MAAM;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AAEjD,UAAU,KAAK;IACb,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,KAAK,2CA4E1C;AAoCD,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBX,CAAC"}

package/build/select/Select.js

@@ -1,92 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import styled from "styled-components";
-import { ArrowBottom } from "./icons";
-import useOutsideAlerter from "../outside-alerter/useOutsideAlerter";
-export default function Select(props) {
-    const { selectedValue, className, onChange } = props;
-    const [options, setOptions] = useState(null);
-    const [isListVisible, setListVisibility] = useState(false);
-    const [selectedOption, setSelectedOption] = useState(null);
-    const ref = useRef(null);
-    const { hasClickedOutside, onReset: onResetOutsideAlerter } = useOutsideAlerter(ref);
-    const handleSelectedOptionClick = () => {
-        onResetOutsideAlerter();
-        setListVisibility(!isListVisible);
-    };
-    const handleOptionClick = (option) => {
-        setSelectedOption(option);
-        setListVisibility(false);
-        if (onChange) {
-            onChange(option);
-        }
-    };
-    useEffect(() => {
-        setOptions(props.options.map((option, index) => (Object.assign(Object.assign({}, option), { id: index }))));
-    }, [props.options]);
-    useEffect(() => {
-        if (options && !selectedOption) {
-            setSelectedOption(selectedValue ? options.find((option) => option.value === selectedValue) : options[0]);
-        }
-    }, [options]);
-    useEffect(() => {
-        if (hasClickedOutside) {
-            setListVisibility(false);
-        }
-    }, [hasClickedOutside]);
-    if (!options || !selectedOption) {
-        return null;
-    }
-    return (_jsxs(Container, { className: `select ${className}`, ref: ref, children: [_jsxs(SelectedOptionContainer, { className: "select-selected-option", onClick: handleSelectedOptionClick, children: [_jsx(SelectedOptionText, { className: "select-selected-option-text", children: selectedOption.label }), _jsx(SelectedOptionArrow, { className: "select-arrow" })] }), isListVisible && (_jsx(OptionsList, { className: "select-options", children: options
-                    .filter((option) => option.id !== selectedOption.id)
-                    .map((option) => (_jsx(Option, { className: "select-option", onClick: () => handleOptionClick(option), children: option.label }, option.id))) }))] }));
-}
-const Container = styled.div `
-  width: fit-content;
-`;
-const SelectedOptionContainer = styled.div `
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  padding: 10px;
-  background-color: white;
-  border-radius: 5px;
-`;
-const SelectedOptionText = styled.span `
-  padding-right: 10px;
-  border-right: 1px solid black;
-`;
-const SelectedOptionArrow = styled(ArrowBottom) `
-  width: 15px;
-  margin-left: 10px;
-`;
-const OptionsList = styled.ul `
-  width: 100%;
-  list-style: none;
-  padding: 0;
-  margin: 10px 0 0 0;
-  user-select: none;
-  background-color: white;
-  border-radius: 5px;
-`;
-const Option = styled.li `
-  padding: 10px;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #ecf0f1;
-
-    &:first-child {
-      border-radius: 5px 5px 0 0;
-    }
-
-    &:last-child {
-      border-radius: 0 0 5px 5px;
-    }
-
-    &:only-child {
-      border-radius: 5px;
-    }
-  }
-`;