@nulogy/components 16.1.0 → 17.0.0

package/dist/esm/Select/MenuList.js

@@ -0,0 +1,124 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { VariableSizeList } from "../node_modules/.pnpm/react-window@1.8.11_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-window/dist/index.esm.js";
+import { flattenGroupedChildren, getCurrentIndex, createGetHeight } from "./lib.js";
+function MenuList(props) {
+  const children = React.useMemo(() => {
+    const children2 = React.Children.toArray(props.children);
+    const head = children2[0] || {};
+    if (React.isValidElement(head)) {
+      const { props: { data: { options = [] } = {} } = {} } = head;
+      const groupedChildrenLength = options.length;
+      const isGrouped = groupedChildrenLength > 0;
+      const flattenedChildren = isGrouped && flattenGroupedChildren(children2);
+      return isGrouped ? flattenedChildren : children2;
+    } else {
+      return [];
+    }
+  }, [props.children]);
+  const { getStyles } = props;
+  const groupHeadingStyles = getStyles("groupHeading", props);
+  const loadingMsgStyles = getStyles("loadingMessage", props);
+  const noOptionsMsgStyles = getStyles("noOptionsMessage", props);
+  const optionStyles = getStyles("option", props);
+  const getHeight = createGetHeight({
+    groupHeadingStyles,
+    noOptionsMsgStyles,
+    optionStyles,
+    loadingMsgStyles
+  });
+  const heights = React.useMemo(() => children.map(getHeight), [children]);
+  const currentIndex = React.useMemo(() => getCurrentIndex(children), [children]);
+  const itemCount = children.length;
+  const [measuredHeights, setMeasuredHeights] = React.useState({});
+  const { maxHeight, paddingBottom = 0, paddingTop = 0, ...menuListStyle } = getStyles("menuList", props);
+  const totalHeight = React.useMemo(() => {
+    return heights.reduce((sum, height, idx) => {
+      if (measuredHeights[idx]) {
+        return sum + measuredHeights[idx];
+      } else {
+        return sum + height;
+      }
+    }, 0);
+  }, [heights, measuredHeights]);
+  const totalMenuHeight = totalHeight + paddingBottom + paddingTop;
+  const menuHeight = Math.min(maxHeight, totalMenuHeight);
+  const estimatedItemSize = Math.floor(totalHeight / itemCount);
+  const { innerRef, selectProps } = props;
+  const { classNamePrefix, isMulti } = selectProps || {};
+  const list = React.useRef(null);
+  React.useEffect(() => {
+    setMeasuredHeights({});
+  }, [props.children]);
+  const setMeasuredHeight = ({ index, measuredHeight }) => {
+    if (measuredHeights[index] !== void 0 && measuredHeights[index] === measuredHeight) {
+      return;
+    }
+    setMeasuredHeights((measuredHeights2) => ({
+      ...measuredHeights2,
+      [index]: measuredHeight
+    }));
+    if (list.current) {
+      list.current.resetAfterIndex(index);
+    }
+  };
+  React.useEffect(() => {
+    if (currentIndex >= 0 && list.current !== null) {
+      list.current.scrollToItem(currentIndex);
+    }
+  }, [currentIndex, children, list]);
+  return /* @__PURE__ */ jsx(
+    VariableSizeList,
+    {
+      className: classNamePrefix ? `${classNamePrefix}__menu-list${isMulti ? ` ${classNamePrefix}__menu-list--is-multi` : ""}` : "",
+      style: menuListStyle,
+      ref: list,
+      outerRef: innerRef,
+      estimatedItemSize,
+      innerElementType: React.forwardRef(
+        ({ style, ...rest }, ref) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            style: {
+              ...style,
+              height: `${parseFloat(style.height) + paddingBottom + paddingTop}px`
+            },
+            ...rest
+          }
+        )
+      ),
+      height: menuHeight,
+      width: "100%",
+      itemCount,
+      itemData: children,
+      itemSize: (index) => measuredHeights[index] || heights[index],
+      children: ({ data, index, style }) => {
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...style,
+              top: `${parseFloat(style.top.toString()) + paddingTop}px`
+            },
+            children: /* @__PURE__ */ jsx(MenuItem, { data: data[index], index, setMeasuredHeight })
+          }
+        );
+      }
+    }
+  );
+}
+function MenuItem({ data, index, setMeasuredHeight }) {
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (ref.current) {
+      const measuredHeight = ref.current.getBoundingClientRect().height;
+      setMeasuredHeight({ index, measuredHeight });
+    }
+  }, [ref.current]);
+  return /* @__PURE__ */ jsx("div", { ref, children: data }, `option-${index}`);
+}
+export {
+  MenuList as default
+};
+//# sourceMappingURL=MenuList.js.map

package/dist/esm/Select/MenuList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuList.js","sources":["../../../src/Select/MenuList.tsx"],"sourcesContent":["/*\n  Copied as is from: https://github.com/jacobworrel/react-windowed-select/blob/main/src/MenuList.tsx\n  MIT License\n  Copyright (c) 2019 Jacob Worrel\n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files (the \"Software\"), to deal\n  in the Software without restriction, including without limitation the rights\n  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n  copies of the Software, and to permit persons to whom the Software is\n  furnished to do so, subject to the following conditions:\n  The above copyright notice and this permission notice shall be included in all\n  copies or substantial portions of the Software.\n  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n  SOFTWARE.\n*/\n\nimport * as React from \"react\";\nimport { ListChildComponentProps, VariableSizeList as List } from \"react-window\";\nimport { OptionProps, GroupBase } from \"react-select\";\nimport { createGetHeight, flattenGroupedChildren, getCurrentIndex } from \"./lib\";\n\ninterface Style extends React.CSSProperties {\n  top: number;\n}\n\ninterface ListChildProps extends ListChildComponentProps {\n  style: Style;\n}\n\ninterface OptionTypeBase {\n  [key: string]: any;\n}\n\nfunction MenuList(props) {\n  const children = React.useMemo(() => {\n    const children = React.Children.toArray(props.children);\n\n    const head = children[0] || {};\n\n    if (React.isValidElement<OptionProps<OptionTypeBase, boolean, GroupBase<OptionTypeBase>>>(head)) {\n      const { props: { data: { options = [] } = {} } = {} } = head;\n      const groupedChildrenLength = options.length;\n      const isGrouped = groupedChildrenLength > 0;\n      const flattenedChildren = isGrouped && flattenGroupedChildren(children);\n\n      return isGrouped ? flattenedChildren : children;\n    } else {\n      return [];\n    }\n  }, [props.children]);\n\n  const { getStyles } = props;\n  const groupHeadingStyles = getStyles(\"groupHeading\", props);\n  const loadingMsgStyles = getStyles(\"loadingMessage\", props);\n  const noOptionsMsgStyles = getStyles(\"noOptionsMessage\", props);\n  const optionStyles = getStyles(\"option\", props);\n  const getHeight = createGetHeight({\n    groupHeadingStyles,\n    noOptionsMsgStyles,\n    optionStyles,\n    loadingMsgStyles,\n  });\n\n  const heights = React.useMemo(() => children.map(getHeight), [children]);\n  const currentIndex = React.useMemo(() => getCurrentIndex(children), [children]);\n\n  const itemCount = children.length;\n\n  const [measuredHeights, setMeasuredHeights] = React.useState({});\n\n  // calc menu height\n  const { maxHeight, paddingBottom = 0, paddingTop = 0, ...menuListStyle } = getStyles(\"menuList\", props);\n  const totalHeight = React.useMemo(() => {\n    return heights.reduce((sum, height, idx) => {\n      if (measuredHeights[idx]) {\n        return sum + measuredHeights[idx];\n      } else {\n        return sum + height;\n      }\n    }, 0);\n  }, [heights, measuredHeights]);\n  const totalMenuHeight = totalHeight + paddingBottom + paddingTop;\n  const menuHeight = Math.min(maxHeight, totalMenuHeight);\n  const estimatedItemSize = Math.floor(totalHeight / itemCount);\n\n  const { innerRef, selectProps } = props;\n\n  const { classNamePrefix, isMulti } = selectProps || {};\n  const list = React.useRef<List>(null);\n\n  React.useEffect(() => {\n    setMeasuredHeights({});\n  }, [props.children]);\n\n  // method to pass to inner item to set this items outer height\n  const setMeasuredHeight = ({ index, measuredHeight }) => {\n    if (measuredHeights[index] !== undefined && measuredHeights[index] === measuredHeight) {\n      return;\n    }\n\n    setMeasuredHeights((measuredHeights) => ({\n      ...measuredHeights,\n      [index]: measuredHeight,\n    }));\n\n    // this forces the list to rerender items after the item positions resizing\n    if (list.current) {\n      list.current.resetAfterIndex(index);\n    }\n  };\n\n  React.useEffect(() => {\n    /**\n     * enables scrolling on key down arrow\n     */\n    if (currentIndex >= 0 && list.current !== null) {\n      list.current.scrollToItem(currentIndex);\n    }\n  }, [currentIndex, children, list]);\n\n  return (\n    <List\n      className={\n        classNamePrefix\n          ? `${classNamePrefix}__menu-list${isMulti ? ` ${classNamePrefix}__menu-list--is-multi` : \"\"}`\n          : \"\"\n      }\n      style={menuListStyle}\n      ref={list}\n      outerRef={innerRef}\n      estimatedItemSize={estimatedItemSize}\n      innerElementType={React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n        ({ style, ...rest }, ref) => (\n          <div\n            ref={ref}\n            style={{\n              ...style,\n              height: `${parseFloat(style.height as string) + paddingBottom + paddingTop}px`,\n            }}\n            {...rest}\n          />\n        )\n      )}\n      height={menuHeight}\n      width=\"100%\"\n      itemCount={itemCount}\n      itemData={children}\n      itemSize={(index) => measuredHeights[index] || heights[index]}\n    >\n      {/* @ts-expect-error - react-window types may not match exactly with our usage */}\n      {({ data, index, style }: ListChildProps) => {\n        return (\n          <div\n            style={{\n              ...style,\n              top: `${parseFloat(style.top.toString()) + paddingTop}px`,\n            }}\n          >\n            <MenuItem data={data[index]} index={index} setMeasuredHeight={setMeasuredHeight} />\n          </div>\n        );\n      }}\n    </List>\n  );\n}\n\nfunction MenuItem({ data, index, setMeasuredHeight }) {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  // using useLayoutEffect prevents bounciness of options of re-renders\n  React.useLayoutEffect(() => {\n    if (ref.current) {\n      const measuredHeight = ref.current.getBoundingClientRect().height;\n\n      setMeasuredHeight({ index, measuredHeight });\n    }\n  }, [ref.current]);\n\n  return (\n    <div key={`option-${index}`} ref={ref}>\n      {data}\n    </div>\n  );\n}\nexport default MenuList;\n"],"names":["children","measuredHeights","List"],"mappings":"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"}

package/dist/esm/Select/Select.js

@@ -0,0 +1,116 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { forwardRef } from "react";
+import StateManagedSelect$1 from "../node_modules/.pnpm/react-select@5.10.2_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-select/dist/react-select.esm.js";
+import { useTheme } from "styled-components";
+import customStyles from "./customReactSelectStyles.js";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext.js";
+import { getSubset } from "../utils/subset.js";
+import numberFromDimension from "../utils/numberFromDimension/index.js";
+import { addStyledProps } from "../StyledProps/index.js";
+import { SelectInput, SelectMenu, SelectContainer, SelectDropdownIndicator, SelectClearIndicator, SelectMultiValue, SelectControl } from "./SelectComponents.js";
+import { SelectOption } from "./SelectOption.js";
+import MenuList from "./MenuList.js";
+import { calcOptionsLength, extractValue, getReactSelectValue } from "./lib.js";
+import { useTranslation } from "../node_modules/.pnpm/react-i18next@12.3.1_i18next@19.9.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/useTranslation.js";
+import Field from "../Form/Field.js";
+import MaybeFieldLabel from "../FieldLabel/MaybeFieldLabel.js";
+import InlineValidation from "../Validation/InlineValidation.js";
+const NDSSelect = forwardRef(
+  ({
+    value,
+    onChange,
+    defaultValue,
+    disabled,
+    errorMessage,
+    errorList,
+    id,
+    initialIsOpen,
+    multiselect,
+    placeholder,
+    components,
+    options,
+    styles,
+    windowThreshold = 300,
+    autocomplete = true,
+    maxHeight = "248px",
+    required = false,
+    menuPosition = "absolute",
+    menuPlacement = "bottom",
+    classNamePrefix = "ndsSelect",
+    closeMenuOnSelect = true,
+    noOptionsMessage,
+    ...props
+  }, ref) => {
+    const { t } = useTranslation();
+    const variant = useComponentVariant();
+    const theme = useTheme();
+    const styledProps = getSubset(props, addStyledProps);
+    const error = !!(errorMessage || errorList);
+    const optionsRef = React__default.useRef(options);
+    const optionsLength = React__default.useMemo(() => calcOptionsLength(options), [options]);
+    const isWindowed = optionsLength >= windowThreshold;
+    const { labelText, requirementText, helpText, hint } = props;
+    const fieldLabelProps = { labelText, requirementText, helpText, hint };
+    noOptionsMessage || (noOptionsMessage = () => t("no options"));
+    React__default.useEffect(() => {
+      optionsRef.current = options;
+    }, [options]);
+    const stylesConfig = customStyles({
+      theme,
+      error,
+      variant,
+      maxHeight,
+      windowed: options.length > windowThreshold
+    });
+    return /* @__PURE__ */ jsx(Field, { ...styledProps, children: /* @__PURE__ */ jsxs(MaybeFieldLabel, { ...fieldLabelProps, children: [
+      /* @__PURE__ */ jsx(
+        StateManagedSelect$1,
+        {
+          ref,
+          isSearchable: autocomplete,
+          isDisabled: disabled,
+          defaultMenuIsOpen: initialIsOpen,
+          isMulti: multiselect,
+          defaultValue: getReactSelectValue(options, defaultValue),
+          value: getReactSelectValue(options, value),
+          options,
+          onChange: (newValue) => {
+            if (!onChange) return;
+            const value2 = extractValue(newValue, multiselect);
+            onChange(value2);
+          },
+          placeholder: placeholder || t("select"),
+          "aria-required": required,
+          required,
+          "aria-invalid": error,
+          inputId: id,
+          styles: styles ? styles(stylesConfig) : stylesConfig,
+          components: {
+            Option: (props2) => /* @__PURE__ */ jsx(SelectOption, { ...props2, children: props2.children }),
+            Control: SelectControl,
+            MultiValue: SelectMultiValue,
+            ClearIndicator: SelectClearIndicator,
+            DropdownIndicator: SelectDropdownIndicator,
+            SelectContainer,
+            Menu: SelectMenu,
+            Input: SelectInput,
+            ...isWindowed ? { MenuList } : {},
+            ...components
+          },
+          closeMenuOnSelect,
+          classNamePrefix,
+          menuPosition,
+          menuPlacement,
+          maxMenuHeight: numberFromDimension(maxHeight),
+          noOptionsMessage,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(InlineValidation, { mt: "x1", errorMessage, errorList })
+    ] }) });
+  }
+);
+export {
+  NDSSelect as default
+};
+//# sourceMappingURL=Select.js.map

package/dist/esm/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/Select/Select.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, MutableRefObject } from \"react\";\nimport Select from \"react-select/base\";\nimport ReactSelect, { MenuPlacement, MenuPosition, PropsValue } from \"react-select\";\nimport type { GroupBase, Props, StylesConfig } from \"react-select\";\nimport { useTranslation } from \"react-i18next\";\nimport { useTheme } from \"styled-components\";\nimport { Field } from \"../Form\";\nimport { MaybeFieldLabel } from \"../FieldLabel\";\nimport { InlineValidation } from \"../Validation\";\nimport customStyles from \"../Select/customReactSelectStyles\";\nimport { useComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\nimport { getSubset } from \"../utils/subset\";\nimport numberFromDimension from \"../utils/numberFromDimension\";\nimport { addStyledProps, StyledProps } from \"../StyledProps\";\nimport {\n  SelectControl,\n  SelectMultiValue,\n  SelectClearIndicator,\n  SelectContainer,\n  SelectInput,\n  SelectDropdownIndicator,\n  SelectMenu,\n} from \"./SelectComponents\";\nimport { SelectOption } from \"./SelectOption\";\nimport MenuList from \"./MenuList\";\nimport { calcOptionsLength, checkOptionsAreValid, CustomOnChangeValue, extractValue, getReactSelectValue } from \"./lib\";\nimport { FieldLabelProps } from \"../FieldLabel/FieldLabel.type\";\n\nexport type NDSOptionValue = string | number | boolean | null;\n\nexport interface NDSOption {\n  label: ReactNode;\n  value: NDSOptionValue;\n}\n\nexport interface CustomProps<\n  Option extends NDSOption,\n  IsMulti extends boolean,\n  Group extends GroupBase<Option>,\n> extends StyledProps {\n  autocomplete?: Props<Option, IsMulti, Group>[\"isSearchable\"];\n  // @see FieldLabel\n  labelText?: FieldLabelProps[\"labelText\"];\n  // @see FieldLabel\n  requirementText?: FieldLabelProps[\"requirementText\"];\n  // @see FieldLabel\n  hint?: FieldLabelProps[\"hint\"];\n  // @see FieldLabel\n  helpText?: FieldLabelProps[\"helpText\"];\n  disabled?: Props<Option, IsMulti, Group>[\"isDisabled\"];\n  errorMessage?: string;\n  errorList?: string[];\n  initialIsOpen?: Props<Option, IsMulti, Group>[\"defaultMenuIsOpen\"];\n  multiselect?: Props<Option, IsMulti, Group>[\"isMulti\"];\n  maxHeight?: string;\n  defaultValue?: PropsValue<Option[\"value\"]>;\n  value?: PropsValue<Option[\"value\"]>;\n  options: readonly Option[];\n  onChange?: (newValue: CustomOnChangeValue<IsMulti>) => void;\n  windowThreshold?: number;\n  styles?: (selectStyles: StylesConfig<Option, IsMulti, Group>) => StylesConfig<Option, IsMulti, Group>;\n}\n\nexport type NDSSelectProps<\n  Option extends NDSOption = NDSOption,\n  IsMulti extends boolean = boolean,\n  Group extends GroupBase<Option> = GroupBase<Option>,\n> = Omit<\n  Props<Option, IsMulti, Group>,\n  keyof CustomProps<Option, IsMulti, Group> | \"isSearchable\" | \"isDisabled\" | \"defaultMenuIsOpen\" | \"isMulti\" | \"styles\"\n> &\n  CustomProps<Option, IsMulti, Group>;\n\nconst NDSSelect = forwardRef(\n  <\n    Option extends NDSOption = NDSOption,\n    IsMulti extends boolean = boolean,\n    Group extends GroupBase<Option> = GroupBase<Option>,\n  >(\n    {\n      value,\n      onChange,\n      defaultValue,\n      disabled,\n      errorMessage,\n      errorList,\n      id,\n      initialIsOpen,\n      multiselect,\n      placeholder,\n      components,\n      options,\n      styles,\n      windowThreshold = 300,\n      autocomplete = true,\n      maxHeight = \"248px\",\n      required = false,\n      menuPosition = \"absolute\" as MenuPosition,\n      menuPlacement = \"bottom\" as MenuPlacement,\n      classNamePrefix = \"ndsSelect\",\n      closeMenuOnSelect = true,\n      noOptionsMessage,\n      ...props\n    }: NDSSelectProps<Option, IsMulti, Group>,\n    ref:\n      | ((instance: Select<Option, IsMulti, Group> | null) => void)\n      | MutableRefObject<Select<Option, IsMulti, Group> | null>\n      | null\n  ) => {\n    const { t } = useTranslation();\n    const variant = useComponentVariant();\n    const theme = useTheme();\n    const styledProps = getSubset(props, addStyledProps);\n    const error = !!(errorMessage || errorList);\n    const optionsRef = React.useRef(options);\n    const optionsLength = React.useMemo(() => calcOptionsLength(options), [options]);\n    const isWindowed = optionsLength >= windowThreshold;\n    const { labelText, requirementText, helpText, hint } = props;\n    const fieldLabelProps = { labelText, requirementText, helpText, hint };\n    noOptionsMessage ||= () => t(\"no options\");\n\n    React.useEffect(() => {\n      checkOptionsAreValid(options);\n      optionsRef.current = options;\n    }, [options]);\n\n    const stylesConfig = customStyles<Option, IsMulti, Group>({\n      theme: theme,\n      error,\n      variant,\n      maxHeight,\n      windowed: options.length > windowThreshold,\n    });\n\n    return (\n      <Field {...styledProps}>\n        <MaybeFieldLabel {...fieldLabelProps}>\n          <ReactSelect\n            ref={ref}\n            isSearchable={autocomplete}\n            isDisabled={disabled}\n            defaultMenuIsOpen={initialIsOpen}\n            isMulti={multiselect}\n            defaultValue={getReactSelectValue(options, defaultValue)}\n            value={getReactSelectValue(options, value)}\n            options={options}\n            onChange={(newValue) => {\n              if (!onChange) return;\n\n              const value = extractValue(newValue, multiselect);\n              onChange(value);\n            }}\n            placeholder={placeholder || t(\"select\")}\n            aria-required={required}\n            required={required}\n            aria-invalid={error}\n            inputId={id}\n            styles={styles ? styles(stylesConfig) : stylesConfig}\n            components={{\n              Option: (props) => <SelectOption {...props}>{props.children}</SelectOption>,\n              Control: SelectControl,\n              MultiValue: SelectMultiValue,\n              ClearIndicator: SelectClearIndicator,\n              DropdownIndicator: SelectDropdownIndicator,\n              SelectContainer: SelectContainer,\n              Menu: SelectMenu,\n              Input: SelectInput,\n              ...(isWindowed ? { MenuList } : {}),\n              ...components,\n            }}\n            closeMenuOnSelect={closeMenuOnSelect}\n            classNamePrefix={classNamePrefix}\n            menuPosition={menuPosition}\n            menuPlacement={menuPlacement}\n            maxMenuHeight={numberFromDimension(maxHeight)}\n            noOptionsMessage={noOptionsMessage}\n            {...props}\n          />\n          <InlineValidation mt=\"x1\" errorMessage={errorMessage} errorList={errorList} />\n        </MaybeFieldLabel>\n      </Field>\n    );\n  }\n) as <\n  Option extends NDSOption = NDSOption,\n  IsMulti extends boolean = false,\n  Group extends GroupBase<Option> = GroupBase<Option>,\n>(\n  props: NDSSelectProps<Option, IsMulti, Group> & React.RefAttributes<Select<Option, IsMulti, Group>>\n) => React.ReactElement;\n\nexport default NDSSelect;\n"],"names":["React","ReactSelect","value","props"],"mappings":";;;;;;;;;;;;;;;;;AAyEA,MAAM,YAAY;AAAA,EAChB,CAKE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAIG;AACH,UAAM,EAAE,EAAA,IAAM,eAAA;AACd,UAAM,UAAU,oBAAA;AAChB,UAAM,QAAQ,SAAA;AACd,UAAM,cAAc,UAAU,OAAO,cAAc;AACnD,UAAM,QAAQ,CAAC,EAAE,gBAAgB;AACjC,UAAM,aAAaA,eAAM,OAAO,OAAO;AACvC,UAAM,gBAAgBA,eAAM,QAAQ,MAAM,kBAAkB,OAAO,GAAG,CAAC,OAAO,CAAC;AAC/E,UAAM,aAAa,iBAAiB;AACpC,UAAM,EAAE,WAAW,iBAAiB,UAAU,SAAS;AACvD,UAAM,kBAAkB,EAAE,WAAW,iBAAiB,UAAU,KAAA;AAChE,4CAAqB,MAAM,EAAE,YAAY;AAEzCA,mBAAM,UAAU,MAAM;AAEpB,iBAAW,UAAU;AAAA,IACvB,GAAG,CAAC,OAAO,CAAC;AAEZ,UAAM,eAAe,aAAqC;AAAA,MACxD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,QAAQ,SAAS;AAAA,IAAA,CAC5B;AAED,+BACG,OAAA,EAAO,GAAG,aACT,UAAA,qBAAC,iBAAA,EAAiB,GAAG,iBACnB,UAAA;AAAA,MAAA;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC;AAAA,UACA,cAAc;AAAA,UACd,YAAY;AAAA,UACZ,mBAAmB;AAAA,UACnB,SAAS;AAAA,UACT,cAAc,oBAAoB,SAAS,YAAY;AAAA,UACvD,OAAO,oBAAoB,SAAS,KAAK;AAAA,UACzC;AAAA,UACA,UAAU,CAAC,aAAa;AACtB,gBAAI,CAAC,SAAU;AAEf,kBAAMC,SAAQ,aAAa,UAAU,WAAW;AAChD,qBAASA,MAAK;AAAA,UAChB;AAAA,UACA,aAAa,eAAe,EAAE,QAAQ;AAAA,UACtC,iBAAe;AAAA,UACf;AAAA,UACA,gBAAc;AAAA,UACd,SAAS;AAAA,UACT,QAAQ,SAAS,OAAO,YAAY,IAAI;AAAA,UACxC,YAAY;AAAA,YACV,QAAQ,CAACC,WAAU,oBAAC,gBAAc,GAAGA,QAAQ,UAAAA,OAAM,UAAS;AAAA,YAC5D,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,YAChB,mBAAmB;AAAA,YACnB;AAAA,YACA,MAAM;AAAA,YACN,OAAO;AAAA,YACP,GAAI,aAAa,EAAE,SAAA,IAAa,CAAA;AAAA,YAChC,GAAG;AAAA,UAAA;AAAA,UAEL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,eAAe,oBAAoB,SAAS;AAAA,UAC5C;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,MAEN,oBAAC,kBAAA,EAAiB,IAAG,MAAK,cAA4B,UAAA,CAAsB;AAAA,IAAA,EAAA,CAC9E,EAAA,CACF;AAAA,EAEJ;AACF;"}

package/dist/esm/Select/SelectComponents.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { c as components } from "../node_modules/.pnpm/react-select@5.10.2_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-select/dist/index-641ee5b8.esm.js";
+function SelectControl(props) {
+  const { isFocused } = props;
+  return /* @__PURE__ */ jsx("div", { "data-testid": "select-control", children: /* @__PURE__ */ jsx(components.Control, { className: isFocused ? "nds-select--is-focused" : null, isFocused, ...props, children: props.children }) });
+}
+function SelectMultiValue(props) {
+  return /* @__PURE__ */ jsx("div", { "data-testid": "select-multivalue", children: /* @__PURE__ */ jsx(components.MultiValue, { ...props, children: props.children }) });
+}
+function SelectClearIndicator(props) {
+  return /* @__PURE__ */ jsx("div", { "data-testid": "select-clear", children: /* @__PURE__ */ jsx(components.ClearIndicator, { ...props }) });
+}
+function SelectDropdownIndicator(props) {
+  return /* @__PURE__ */ jsx("div", { "data-testid": "select-arrow", children: /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props }) });
+}
+function SelectMenu(props) {
+  return /* @__PURE__ */ jsx("div", { "data-testid": "select-dropdown", children: /* @__PURE__ */ jsx(components.Menu, { ...props, children: props.children }) });
+}
+function SelectContainer(props) {
+  return /* @__PURE__ */ jsx("div", { "data-testid": "select-container", children: /* @__PURE__ */ jsx(components.SelectContainer, { ...props, children: props.children }) });
+}
+function SelectInput(props) {
+  return /* @__PURE__ */ jsx("div", { "data-testid": "select-input", children: /* @__PURE__ */ jsx(components.Input, { ...props, children: props.children }) });
+}
+export {
+  SelectClearIndicator,
+  SelectContainer,
+  SelectControl,
+  SelectDropdownIndicator,
+  SelectInput,
+  SelectMenu,
+  SelectMultiValue
+};
+//# sourceMappingURL=SelectComponents.js.map

package/dist/esm/Select/SelectComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectComponents.js","sources":["../../../src/Select/SelectComponents.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  ClearIndicatorProps,\n  ContainerProps,\n  ControlProps,\n  DropdownIndicatorProps,\n  InputProps,\n  MenuProps,\n  MultiValueProps,\n  GroupBase,\n  components,\n} from \"react-select\";\nimport { NDSOption } from \"./Select\";\n\nexport function SelectControl<\n  Option = NDSOption,\n  IsMulti extends boolean = boolean,\n  Group extends GroupBase<Option> = GroupBase<Option>,\n>(props: ControlProps<Option, IsMulti, Group>) {\n  const { isFocused } = props;\n  return (\n    <div data-testid=\"select-control\">\n      <components.Control className={isFocused ? \"nds-select--is-focused\" : null} isFocused={isFocused} {...props}>\n        {props.children}\n      </components.Control>\n    </div>\n  );\n}\n\nexport function SelectMultiValue<\n  Option = NDSOption,\n  IsMulti extends boolean = boolean,\n  Group extends GroupBase<Option> = GroupBase<Option>,\n>(props: MultiValueProps<Option, IsMulti, Group>) {\n  return (\n    <div data-testid=\"select-multivalue\">\n      <components.MultiValue {...props}>{props.children}</components.MultiValue>\n    </div>\n  );\n}\n\nexport function SelectClearIndicator<\n  Option = NDSOption,\n  IsMulti extends boolean = boolean,\n  Group extends GroupBase<Option> = GroupBase<Option>,\n>(props: ClearIndicatorProps<Option, IsMulti, Group>) {\n  return (\n    <div data-testid=\"select-clear\">\n      <components.ClearIndicator {...props} />\n    </div>\n  );\n}\n\nexport function SelectDropdownIndicator<\n  Option = NDSOption,\n  IsMulti extends boolean = boolean,\n  Group extends GroupBase<Option> = GroupBase<Option>,\n>(props: DropdownIndicatorProps<Option, IsMulti, Group>) {\n  return (\n    <div data-testid=\"select-arrow\">\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n}\n\nexport function SelectMenu<\n  Option = NDSOption,\n  IsMulti extends boolean = boolean,\n  Group extends GroupBase<Option> = GroupBase<Option>,\n>(props: MenuProps<Option, IsMulti, Group>) {\n  return (\n    <div data-testid=\"select-dropdown\">\n      <components.Menu {...props}>{props.children}</components.Menu>\n    </div>\n  );\n}\n\nexport function SelectContainer<\n  Option = NDSOption,\n  IsMulti extends boolean = boolean,\n  Group extends GroupBase<Option> = GroupBase<Option>,\n>(props: ContainerProps<Option, IsMulti, Group>) {\n  return (\n    <div data-testid=\"select-container\">\n      <components.SelectContainer {...props}>{props.children}</components.SelectContainer>\n    </div>\n  );\n}\n\nexport function SelectInput<\n  Option = NDSOption,\n  IsMulti extends boolean = boolean,\n  Group extends GroupBase<Option> = GroupBase<Option>,\n>(props: InputProps<Option, IsMulti, Group>) {\n  return (\n    <div data-testid=\"select-input\">\n      <components.Input {...props}>{props.children}</components.Input>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAcO,SAAS,cAId,OAA6C;AAC7C,QAAM,EAAE,cAAc;AACtB,6BACG,OAAA,EAAI,eAAY,kBACf,UAAA,oBAAC,WAAW,SAAX,EAAmB,WAAW,YAAY,2BAA2B,MAAM,WAAuB,GAAG,OACnG,UAAA,MAAM,UACT,GACF;AAEJ;AAEO,SAAS,iBAId,OAAgD;AAChD,SACE,oBAAC,OAAA,EAAI,eAAY,qBACf,UAAA,oBAAC,WAAW,YAAX,EAAuB,GAAG,OAAQ,UAAA,MAAM,SAAA,CAAS,GACpD;AAEJ;AAEO,SAAS,qBAId,OAAoD;AACpD,SACE,oBAAC,OAAA,EAAI,eAAY,gBACf,UAAA,oBAAC,WAAW,gBAAX,EAA2B,GAAG,MAAA,CAAO,EAAA,CACxC;AAEJ;AAEO,SAAS,wBAId,OAAuD;AACvD,SACE,oBAAC,OAAA,EAAI,eAAY,gBACf,UAAA,oBAAC,WAAW,mBAAX,EAA8B,GAAG,MAAA,CAAO,EAAA,CAC3C;AAEJ;AAEO,SAAS,WAId,OAA0C;AAC1C,SACE,oBAAC,OAAA,EAAI,eAAY,mBACf,UAAA,oBAAC,WAAW,MAAX,EAAiB,GAAG,OAAQ,UAAA,MAAM,SAAA,CAAS,GAC9C;AAEJ;AAEO,SAAS,gBAId,OAA+C;AAC/C,SACE,oBAAC,OAAA,EAAI,eAAY,oBACf,UAAA,oBAAC,WAAW,iBAAX,EAA4B,GAAG,OAAQ,UAAA,MAAM,SAAA,CAAS,GACzD;AAEJ;AAEO,SAAS,YAId,OAA2C;AAC3C,SACE,oBAAC,OAAA,EAAI,eAAY,gBACf,UAAA,oBAAC,WAAW,OAAX,EAAkB,GAAG,OAAQ,UAAA,MAAM,SAAA,CAAS,GAC/C;AAEJ;"}

package/dist/esm/Select/SelectOption.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import "../node_modules/.pnpm/styled-system@5.1.5/node_modules/styled-system/dist/index.esm.js";
+import { variant } from "../StyledProps/index.js";
+import { c as components } from "../node_modules/.pnpm/react-select@5.10.2_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-select/dist/index-641ee5b8.esm.js";
+import typography from "../node_modules/.pnpm/@styled-system_typography@5.1.2/node_modules/@styled-system/typography/dist/index.esm.js";
+import subPx from "../utils/subPx.js";
+const StyledOption = styled.div(
+  typography,
+  ({ isSelected, isFocused, theme }) => ({
+    "&:last-child": {
+      borderBottomLeftRadius: theme.radii.medium,
+      borderBottomRightRadius: theme.radii.medium
+    },
+    div: {
+      height: "auto",
+      padding: subPx(theme.space.x1),
+      fontWeight: isSelected ? theme.fontWeights.medium : theme.fontWeights.normal,
+      background: isFocused ? theme.colors.lightBlue : null,
+      minHeight: theme.space.x4,
+      minWidth: "max-content",
+      whiteSpace: "nowrap",
+      "&:hover": {
+        background: !isSelected ? theme.colors.lightBlue : null,
+        cursor: "pointer"
+      }
+    }
+  }),
+  ({ theme }) => variant({
+    variants: {
+      touch: {
+        div: {
+          padding: subPx(theme.space.x1)
+        }
+      },
+      desktop: {
+        div: {
+          padding: subPx(theme.space.x1)
+        }
+      }
+    }
+  })
+);
+function SelectOption(props) {
+  return /* @__PURE__ */ jsx(StyledOption, { isSelected: props.isSelected, isFocused: props.isFocused, "data-testid": "select-option", children: /* @__PURE__ */ jsx(components.Option, { ...props, children: props.children }) });
+}
+export {
+  SelectOption,
+  StyledOption
+};
+//# sourceMappingURL=SelectOption.js.map

package/dist/esm/Select/SelectOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.js","sources":["../../../src/Select/SelectOption.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled } from \"styled-components\";\nimport { components, GroupBase, OptionProps } from \"react-select\";\nimport { typography } from \"styled-system\";\nimport { subPx } from \"../utils\";\nimport { variant } from \"../StyledProps\";\nimport { NDSOption } from \"./Select\";\n\ntype StyledOptionProps = {\n  isSelected: boolean;\n  isFocused: boolean;\n};\n\nexport const StyledOption = styled.div<StyledOptionProps>(\n  typography,\n  ({ isSelected, isFocused, theme }) => ({\n    \"&:last-child\": {\n      borderBottomLeftRadius: theme.radii.medium,\n      borderBottomRightRadius: theme.radii.medium,\n    },\n    div: {\n      height: \"auto\",\n      padding: subPx(theme.space.x1),\n      fontWeight: isSelected ? theme.fontWeights.medium : theme.fontWeights.normal,\n      background: isFocused ? theme.colors.lightBlue : null,\n      minHeight: theme.space.x4,\n      minWidth: \"max-content\",\n      whiteSpace: \"nowrap\",\n      \"&:hover\": {\n        background: !isSelected ? theme.colors.lightBlue : null,\n        cursor: \"pointer\",\n      },\n    },\n  }),\n  ({ theme }) =>\n    variant({\n      variants: {\n        touch: {\n          div: {\n            padding: subPx(theme.space.x1),\n          },\n        },\n        desktop: {\n          div: {\n            padding: subPx(theme.space.x1),\n          },\n        },\n      },\n    })\n);\n\nexport interface SelectOptionProps<\n  Option = NDSOption,\n  IsMulti extends boolean = boolean,\n  Group extends GroupBase<Option> = GroupBase<Option>,\n> extends OptionProps<Option, IsMulti, Group> {}\n\nexport function SelectOption<\n  Option extends NDSOption = NDSOption,\n  IsMulti extends boolean = boolean,\n  Group extends GroupBase<Option> = GroupBase<Option>,\n>(props: SelectOptionProps<Option, IsMulti, Group>) {\n  return (\n    <StyledOption isSelected={props.isSelected} isFocused={props.isFocused} data-testid=\"select-option\">\n      <components.Option {...props}>{props.children}</components.Option>\n    </StyledOption>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAaO,MAAM,eAAe,OAAO;AAAA,EACjC;AAAA,EACA,CAAC,EAAE,YAAY,WAAW,aAAa;AAAA,IACrC,gBAAgB;AAAA,MACd,wBAAwB,MAAM,MAAM;AAAA,MACpC,yBAAyB,MAAM,MAAM;AAAA,IAAA;AAAA,IAEvC,KAAK;AAAA,MACH,QAAQ;AAAA,MACR,SAAS,MAAM,MAAM,MAAM,EAAE;AAAA,MAC7B,YAAY,aAAa,MAAM,YAAY,SAAS,MAAM,YAAY;AAAA,MACtE,YAAY,YAAY,MAAM,OAAO,YAAY;AAAA,MACjD,WAAW,MAAM,MAAM;AAAA,MACvB,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,WAAW;AAAA,QACT,YAAY,CAAC,aAAa,MAAM,OAAO,YAAY;AAAA,QACnD,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EACF;AAAA,EAEF,CAAC,EAAE,MAAA,MACD,QAAQ;AAAA,IACN,UAAU;AAAA,MACR,OAAO;AAAA,QACL,KAAK;AAAA,UACH,SAAS,MAAM,MAAM,MAAM,EAAE;AAAA,QAAA;AAAA,MAC/B;AAAA,MAEF,SAAS;AAAA,QACP,KAAK;AAAA,UACH,SAAS,MAAM,MAAM,MAAM,EAAE;AAAA,QAAA;AAAA,MAC/B;AAAA,IACF;AAAA,EACF,CACD;AACL;AAQO,SAAS,aAId,OAAkD;AAClD,6BACG,cAAA,EAAa,YAAY,MAAM,YAAY,WAAW,MAAM,WAAW,eAAY,iBAClF,UAAA,oBAAC,WAAW,QAAX,EAAmB,GAAG,OAAQ,UAAA,MAAM,UAAS,GAChD;AAEJ;"}