@dreamcommerce/aurora 3.0.0-3 → 3.0.0-300

package/build/esm/packages/aurora/src/components/modal/modal_types.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { MODAL_VISIBILITY_STATE, MODAL_WIDTH_VARIANT } from './modal_constants';
+export declare type VisibleStates = typeof MODAL_VISIBILITY_STATE[keyof typeof MODAL_VISIBILITY_STATE];
+export interface IModal {
+    name: string;
+    visibilityState: VisibleStates;
+    width: typeof MODAL_WIDTH_VARIANT[keyof typeof MODAL_WIDTH_VARIANT];
+}
+export interface IModalsManagerContextProps {
+    modalsManagerContainerSelector: string;
+    addModal: (modal: IModal) => void;
+    updateModal: (modal: IModal) => void;
+    getModal: (modalName: string) => IModal | undefined;
+    showModal: (modalName: string) => void;
+    hideModal: (modalName: string, onCloseAction?: () => void) => void;
+    hideAllModals: (onCloseAction?: () => void) => void;
+    openedModals: string[];
+}
+export interface IModalNewProps extends React.HTMLAttributes<HTMLDivElement> {
+    name: string;
+    hideAllModalsOnClose?: boolean;
+    width?: typeof MODAL_WIDTH_VARIANT[keyof typeof MODAL_WIDTH_VARIANT];
+    onCloseAction?: () => void;
+    header?: THeaderObject | React.ReactNode | string;
+    footer?: string | React.ReactNode;
+    children?: React.ReactNode;
+    closeOnOutsideClick?: boolean;
+    closeOnEscButton?: boolean;
+    initiallyVisible?: boolean;
+}
+export declare type THeaderObject = {
+    hasCloseIcon?: boolean;
+    content: React.ReactNode;
+};
+export interface IModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    hasCloseIcon?: boolean;
+    onClose: () => void;
+}
+export interface IModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export interface IModalCloseIconProps extends React.HTMLAttributes<HTMLButtonElement> {
+    onClose: () => void;
+}

package/build/esm/packages/aurora/src/components/modal/modal_types.js

@@ -0,0 +1,3 @@
+import 'react';
+import './modal_constants';
+//# sourceMappingURL=modal_types.js.map

package/build/esm/packages/aurora/src/components/modal/modal_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal_types.js","sourceRoot":"","sources":["../../../../../../../src/components/modal/modal_types.ts"],"names":[],"mappings":"AAAA,OAAuB,OAAO,CAAC;AAE/B,OAA4D,mBAAmB,CAAC"}

package/build/esm/packages/aurora/src/components/modal/modal_variants.d.ts

@@ -0,0 +1,3 @@
+export declare const modalVariants: (props?: ({
+    width?: "s" | "m" | "l" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/build/esm/packages/aurora/src/components/modal/modal_variants.js

@@ -0,0 +1,15 @@
+import { defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cva } from '../../../../../external/class-variance-authority/dist/index.mjs.js';
+import { MODAL_WIDTH_VARIANT } from './modal_constants.js';
+
+var modalVariants = cva('aurora-flex aurora-flex-col aurora-w-full aurora-max-h-[90vh] aurora-absolute aurora-bg aurora-rounded-16 aurora-shadow-xl aurora-opacity-0 aurora-transition-all js__modal', {
+  variants: {
+    width: _defineProperty(_defineProperty(_defineProperty({}, MODAL_WIDTH_VARIANT.s, 'aurora-max-w-[25rem]'), MODAL_WIDTH_VARIANT.m, 'aurora-max-w-[40rem]'), MODAL_WIDTH_VARIANT.l, 'aurora-max-w-[61rem]')
+  },
+  defaultVariants: {
+    width: MODAL_WIDTH_VARIANT.m
+  }
+});
+
+export { modalVariants };
+//# sourceMappingURL=modal_variants.js.map

package/build/esm/packages/aurora/src/components/modal/modal_variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,oBAAoB,oEAAwE;AAC5F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/modal/modals_manager.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+interface IModalsManagerProps {
+    children: ReactNode;
+}
+export declare const ModalsManager: React.FC<IModalsManagerProps>;
+export {};

package/build/esm/packages/aurora/src/components/modal/modals_manager.js

@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react';
+import { ModalsManagerContext } from './modal_context.js';
+import { ModalsWrapper } from './components/modals_wrapper.js';
+import useModals from './hooks/use_modals.js';
+
+var ModalsManager = function ModalsManager(_ref) {
+  var children = _ref.children;
+  var _useModals = useModals(),
+    modalsManagerContainerSelector = _useModals.modalsManagerContainerSelector,
+    addModal = _useModals.addModal,
+    updateModal = _useModals.updateModal,
+    getModal = _useModals.getModal,
+    showModal = _useModals.showModal,
+    hideModal = _useModals.hideModal,
+    hideAllModals = _useModals.hideAllModals,
+    openedModals = _useModals.openedModals;
+  var value = useMemo(function () {
+    return {
+      modalsManagerContainerSelector: modalsManagerContainerSelector,
+      addModal: addModal,
+      updateModal: updateModal,
+      getModal: getModal,
+      showModal: showModal,
+      hideModal: hideModal,
+      hideAllModals: hideAllModals,
+      openedModals: openedModals
+    };
+  }, [modalsManagerContainerSelector, addModal, updateModal, getModal, showModal, hideModal, hideAllModals, openedModals]);
+  return /*#__PURE__*/React.createElement(ModalsManagerContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(ModalsWrapper, null), children);
+};
+
+export { ModalsManager };
+//# sourceMappingURL=modals_manager.js.map

package/build/esm/packages/aurora/src/components/modal/modals_manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_content.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TMultiSelectContentProps } from '../multiselect_types';
+export declare const MultiSelectContent: React.ForwardRefExoticComponent<TMultiSelectContentProps & React.RefAttributes<HTMLDivElement>>;

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_content.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cn } from '../../../utilities/cn.js';
+import { Content } from '@radix-ui/react-dropdown-menu';
+import { Root, Viewport, Scrollbar, Thumb } from '../../../../../../external/@radix-ui/react-scroll-area/dist/index.mjs.js';
+import { MultiSelectGroupLabel } from './multiselect_group_label.js';
+import { MultiSelectItem } from './multiselect_item.js';
+import { MultiSelectSearch } from './multiselect_search.js';
+import { MultiSelectUtils } from '../multiselect_utils.js';
+
+var _excluded = ["options", "selectedOptions", "toggleOption", "triggerWidth", "hasSearch", "searchPlaceholder", "className", "searchNotFoundContent"];
+var MultiSelectContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var options = _ref.options,
+    selectedOptions = _ref.selectedOptions,
+    toggleOption = _ref.toggleOption,
+    triggerWidth = _ref.triggerWidth,
+    hasSearch = _ref.hasSearch,
+    searchPlaceholder = _ref.searchPlaceholder,
+    className = _ref.className,
+    searchNotFoundContent = _ref.searchNotFoundContent,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    search = _React$useState2[0],
+    setSearch = _React$useState2[1];
+  var searchVisibleItems = 0;
+  return /*#__PURE__*/React.createElement(Content, _objectSpread2(_objectSpread2({
+    className: cn("aurora-w-[--radix-dropdown-menu-trigger-width] aurora-min-w-[20rem] aurora-max-h-96 aurora-z-50 aurora-bg aurora-flex aurora-flex-col aurora-gap-1 aurora-mt-1 aurora-overflow-hidden aurora-rounded-8 aurora-border aurora-p-1 aurora-shadow-m data-[state=open]:aurora-animate-in data-[state=closed]:aurora-animate-out data-[state=closed]:aurora-fade-out-0 data-[state=open]:aurora-fade-in-0 data-[state=closed]:aurora-zoom-out-95 data-[state=open]:aurora-zoom-in-95 data-[side=bottom]:aurora-slide-in-from-top-2 data-[side=left]:aurora-slide-in-from-right-2 data-[side=right]:aurora-slide-in-from-left-2 data-[side=top]:aurora-slide-in-from-bottom-2 js__aurora-select-dropdown aurora-group", className)
+  }, props), {}, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement(Root, {
+    type: "auto",
+    className: "aurora-w-full aurora-max-h-60 relative"
+  }, /*#__PURE__*/React.createElement(Viewport, {
+    className: cn('aurora-p-1 aurora-max-h-60 aurora-w-full')
+  }, hasSearch && (/*#__PURE__*/React.createElement("div", {
+    className: "aurora-p-2"
+  }, /*#__PURE__*/React.createElement(MultiSelectSearch, {
+    value: search,
+    tabIndex: 0,
+    onChange: function onChange(e) {
+      e.stopPropagation();
+      setSearch(e.target.value);
+    },
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    },
+    placeholder: searchPlaceholder
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-flex-col aurora-gap-1"
+  }, options === null || options === void 0 ? void 0 : options.map(function (option, index) {
+    var visible = true;
+    if (hasSearch && search && !option.isHeader) {
+      visible = MultiSelectUtils.isOptionVisible(option, search);
+      if (visible) searchVisibleItems++;
+    }
+    if (hasSearch && search && option.isHeader) {
+      visible = MultiSelectUtils.isHeaderVisible(search, options, index);
+    }
+    return option.isHeader ? (/*#__PURE__*/React.createElement(MultiSelectGroupLabel, {
+      key: option.text,
+      className: cn(!visible && 'aurora-hidden')
+    }, option.text)) : (/*#__PURE__*/React.createElement(MultiSelectItem, {
+      key: "select-item-".concat(option.value),
+      option: option,
+      isDisabled: option.isDisabled,
+      isReadonly: option.isReadonly,
+      isSelected: selectedOptions.some(function (selected) {
+        return selected.value === option.value;
+      }),
+      toggleOption: toggleOption,
+      className: cn(!visible && 'aurora-hidden')
+    }, option.text));
+  }), !!hasSearch && !!search && !searchVisibleItems && !!searchNotFoundContent && (/*#__PURE__*/React.createElement("div", {
+    className: "aurora-p-2"
+  }, searchNotFoundContent)))), /*#__PURE__*/React.createElement(Scrollbar, {
+    orientation: "vertical",
+    className: cn('aurora-w-2 aurora-absolute aurora-right-0 aurora-top-0 aurora-bottom-0 aurora-py-1 aurora-pr-[2px] aurora-transition-opacity aurora-duration-200 aurora-opacity-0 group-hover:aurora-opacity-75')
+  }, /*#__PURE__*/React.createElement(Thumb, {
+    className: "aurora-bg-neutral-700 aurora-rounded-full"
+  }))));
+});
+MultiSelectContent.displayName = 'MultiSelectContent';
+
+export { MultiSelectContent };
+//# sourceMappingURL=multiselect_content.js.map

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,iDAAiD,0EAA8E;AAC/H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_group_label.d.ts

@@ -0,0 +1,6 @@
+import React, { PropsWithChildren } from 'react';
+import { TBoxProps } from "../../box/box_types";
+export declare const MultiSelectGroupLabel: {
+    ({ children, ...props }: PropsWithChildren<TBoxProps>): React.JSX.Element;
+    displayName: string;
+};

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_group_label.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { Stack } from '../../stack/stack.js';
+import { Box } from '../../box/box.js';
+import { Typography } from '../../typography/typography.js';
+import { Divider } from '../../divider/divider.js';
+
+var _excluded = ["children"];
+var MultiSelectGroupLabel = function MultiSelectGroupLabel(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2({
+    paddings: {
+      pl: '2',
+      pt: '2',
+      pb: '2',
+      pr: '0'
+    }
+  }, props), /*#__PURE__*/React.createElement(Stack, {
+    align: "center",
+    spacing: "2.5"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "aurora-whitespace-nowrap first-letter:aurora-uppercase",
+    size: "s",
+    color: "subtle",
+    weight: "bold"
+  }, children), /*#__PURE__*/React.createElement(Divider, null)));
+};
+MultiSelectGroupLabel.displayName = 'MultiSelectGroupLabel';
+
+export { MultiSelectGroupLabel };
+//# sourceMappingURL=multiselect_group_label.js.map

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_group_label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_item.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TMultiSelectItemProps } from '../multiselect_types';
+export declare const MultiSelectItem: React.ForwardRefExoticComponent<TMultiSelectItemProps & React.RefAttributes<never>>;

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_item.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cn } from '../../../utilities/cn.js';
+import { Item } from '@radix-ui/react-dropdown-menu';
+import { Box } from '../../box/box.js';
+import { Checkbox } from '../../checkbox/checkbox.js';
+
+var _excluded = ["option", "isSelected", "isDisabled", "isReadonly", "toggleOption", "className"];
+var MultiSelectItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var option = _ref.option,
+    isSelected = _ref.isSelected,
+    isDisabled = _ref.isDisabled,
+    isReadonly = _ref.isReadonly,
+    toggleOption = _ref.toggleOption,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var handleSelect = function handleSelect(event) {
+    event.preventDefault();
+    toggleOption(option);
+  };
+  return /*#__PURE__*/React.createElement(Item, _objectSpread2(_objectSpread2({
+    onSelect: handleSelect,
+    className: cn('aurora-relative aurora-flex aurora-w-full aurora-rounded-6 aurora-cursor-default aurora-select-none aurora-items-center aurora-rounded-sm aurora-p-2 aurora-text-s aurora-outline-none aurora-break-words aurora-text-wrap focus:aurora-bg-hover focus:aurora-text-accent-foreground data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50', {
+      'aurora-bg-hover aurora-font-semibold': isSelected,
+      'aurora-cursor-pointer active:aurora-bg-active': !isDisabled && !isReadonly
+    }, className),
+    style: {
+      wordBreak: 'break-word'
+    },
+    disabled: isDisabled || isReadonly
+  }, props), {}, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement(Box, {
+    align: "center",
+    spacing: "2",
+    backgroundColor: "transparent"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: isSelected
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-flex-col"
+  }, /*#__PURE__*/React.createElement("p", null, option.text), !!option.additionalInfo && /*#__PURE__*/React.createElement("p", {
+    className: "aurora-text-xs aurora-text-subtle-light"
+  }, option.additionalInfo))));
+});
+MultiSelectItem.displayName = 'MultiSelectItem';
+
+export { MultiSelectItem };
+//# sourceMappingURL=multiselect_item.js.map

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_search.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TInputProps } from "../../input/input_types";
+export declare const MultiSelectSearch: (props: TInputProps) => React.JSX.Element;

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_search.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { Input } from '../../input/input.js';
+import { SearchLineIcon } from '../../../assets/icons/search_icon.js';
+
+var MultiSelectSearch = function MultiSelectSearch(props) {
+  return /*#__PURE__*/React.createElement(Input, _objectSpread2({
+    type: "text",
+    preElement: /*#__PURE__*/React.createElement(SearchLineIcon, {
+      className: "aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light"
+    })
+  }, props));
+};
+
+export { MultiSelectSearch };
+//# sourceMappingURL=multiselect_search.js.map

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_trigger.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TMultiSelectTriggerProps } from '../multiselect_types';
+export declare const MultiSelectTrigger: React.ForwardRefExoticComponent<TMultiSelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_trigger.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cn } from '../../../utilities/cn.js';
+import { Trigger } from '@radix-ui/react-dropdown-menu';
+
+var _excluded = ["hasErrors", "className", "children"];
+var MultiSelectTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var hasErrors = _ref.hasErrors,
+    className = _ref.className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Trigger, _objectSpread2(_objectSpread2({
+    asChild: true
+  }, props), {}, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement("button", {
+    className: cn('aurora-flex aurora-h-10 aurora-w-full aurora-items-center aurora-justify-between aurora-rounded-8 aurora-border aurora-border-input aurora-bg-neutral-0 aurora-px-3 aurora-py-2 aurora-text-s hover:aurora-border-strong focus-visible:focus disabled:aurora-cursor-not-allowed disabled:aurora-bg-subtle disabled:aurora-text-subtle-light disabled:aurora-border-subtle [&>span]:aurora-text-ellipsis [&>span]:aurora-whitespace-nowrap [&>span]:aurora-overflow-hidden focus-visible:aurora-border-active -visible:aurora-border-2 data-[state=open]:aurora-border-active data-[state=open]:aurora-border-2', {
+      '!aurora-border-danger aurora-border-2': hasErrors
+    }, className)
+  }, children));
+});
+MultiSelectTrigger.displayName = 'MultiSelectTrigger';
+
+export { MultiSelectTrigger };
+//# sourceMappingURL=multiselect_trigger.js.map

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/multiselect/hooks/use_multiselect_value.d.ts

@@ -0,0 +1,5 @@
+import { Option, TUseMultiSelectValueProps } from "../multiselect_types";
+export declare const useMultiSelectValue: ({ values, options }: TUseMultiSelectValueProps) => {
+    selectedOptions: Option[];
+    setSelectedOptions: (options: Option[]) => void;
+};

package/build/esm/packages/aurora/src/components/multiselect/hooks/use_multiselect_value.js

@@ -0,0 +1,38 @@
+import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { MultiSelectUtils } from '../multiselect_utils.js';
+
+var useMultiSelectValue = function useMultiSelectValue(_ref) {
+  var values = _ref.values,
+    options = _ref.options;
+  // Przechowanie aktualnie wybranych opcji w razie jakby ktoras aktualna opcja zniknela z listy options
+  var _useState = useState(function () {
+      return MultiSelectUtils.findValuesInOptions(values, options);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedOptions = _useState2[0],
+    _setSelectedOptions = _useState2[1];
+  var selectedOptionsRef = useRef(selectedOptions);
+  var setSelectedOptions = useCallback(function (options) {
+    selectedOptionsRef.current = options;
+    _setSelectedOptions(options);
+  }, []);
+  useEffect(function () {
+    if (MultiSelectUtils.areValuesEqual(values, selectedOptionsRef.current.map(function (o) {
+      return o.value;
+    }))) {
+      return;
+    }
+    var newOptions = MultiSelectUtils.findValuesInOptions(values, options);
+    setSelectedOptions(newOptions);
+  }, [options, setSelectedOptions, values]);
+  return useMemo(function () {
+    return {
+      selectedOptions: selectedOptions,
+      setSelectedOptions: setSelectedOptions
+    };
+  }, [selectedOptions, setSelectedOptions]);
+};
+
+export { useMultiSelectValue };
+//# sourceMappingURL=use_multiselect_value.js.map

package/build/esm/packages/aurora/src/components/multiselect/hooks/use_multiselect_value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/multiselect/multiselect.d.ts

@@ -0,0 +1,6 @@
+import React, { PropsWithChildren } from 'react';
+import { TMultiSelectProps } from './multiselect_types';
+export declare const MultiSelect: {
+    ({ id, options, placeholder, disabled, hasSearch, searchPlaceholder, onValueChange, errors, value, searchNotFoundContent, ...props }: PropsWithChildren<TMultiSelectProps>): React.JSX.Element;
+    displayName: string;
+};

package/build/esm/packages/aurora/src/components/multiselect/multiselect.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cn } from '../../utilities/cn.js';
+import { Root, Portal } from '@radix-ui/react-dropdown-menu';
+import { MultiSelectContent } from './components/multiselect_content.js';
+import { MultiSelectTrigger } from './components/multiselect_trigger.js';
+import { useMultiSelectValue } from './hooks/use_multiselect_value.js';
+
+var _excluded = ["id", "options", "placeholder", "disabled", "hasSearch", "searchPlaceholder", "onValueChange", "errors", "value", "searchNotFoundContent"];
+var MultiSelect = function MultiSelect(_ref) {
+  var id = _ref.id,
+    options = _ref.options,
+    placeholder = _ref.placeholder,
+    disabled = _ref.disabled,
+    hasSearch = _ref.hasSearch,
+    searchPlaceholder = _ref.searchPlaceholder,
+    onValueChange = _ref.onValueChange,
+    errors = _ref.errors,
+    value = _ref.value,
+    searchNotFoundContent = _ref.searchNotFoundContent,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useMultiSelectValue = useMultiSelectValue({
+      values: value,
+      options: options
+    }),
+    selectedOptions = _useMultiSelectValue.selectedOptions,
+    setSelectedOptions = _useMultiSelectValue.setSelectedOptions;
+  var handleChange = function handleChange(option) {
+    var newOptions = selectedOptions.some(function (selected) {
+      return selected.value === option.value;
+    }) ? selectedOptions.filter(function (selected) {
+      return selected.value !== option.value;
+    }) : [].concat(_toConsumableArray(selectedOptions), [option]);
+    setSelectedOptions(newOptions);
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newOptions.map(function (o) {
+      return o.value;
+    }));
+  };
+  var showPlaceholder = selectedOptions.length === 0;
+  return /*#__PURE__*/React.createElement(Root, _objectSpread2({}, props), /*#__PURE__*/React.createElement(MultiSelectTrigger, {
+    id: id,
+    disabled: disabled,
+    hasErrors: !!(errors !== null && errors !== void 0 && errors.length)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: cn('aurora-pointer-events-none aurora-select-none', showPlaceholder && 'aurora-text-subtle')
+  }, !showPlaceholder ? selectedOptions.map(function (option) {
+    return option.text;
+  }).join(', ') : placeholder !== null && placeholder !== void 0 ? placeholder : '')), /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(MultiSelectContent, {
+    options: options,
+    selectedOptions: selectedOptions,
+    toggleOption: handleChange,
+    hasSearch: hasSearch,
+    searchPlaceholder: searchPlaceholder,
+    searchNotFoundContent: searchNotFoundContent
+  })));
+};
+MultiSelect.displayName = 'MultiSelect';
+
+export { MultiSelect };
+//# sourceMappingURL=multiselect.js.map

package/build/esm/packages/aurora/src/components/multiselect/multiselect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/multiselect/multiselect_types.d.ts

@@ -0,0 +1,45 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import React, { ReactNode } from 'react';
+export declare type Option = {
+    text: string;
+    value: string;
+    additionalInfo?: string;
+    isHeader?: boolean;
+    isDisabled?: boolean;
+    isReadonly?: boolean;
+};
+export interface TMultiSelectProps extends React.ComponentPropsWithoutRef<typeof DropdownMenu.Root> {
+    id?: string;
+    options: Option[];
+    placeholder?: string;
+    disabled?: boolean;
+    hasSearch?: boolean;
+    searchPlaceholder?: string;
+    searchNotFoundContent?: ReactNode;
+    errors?: string | string[];
+    onValueChange?: (value: string[]) => void;
+    value?: string[];
+}
+export interface TMultiSelectTriggerProps extends React.ComponentPropsWithoutRef<typeof DropdownMenu.Trigger> {
+    hasErrors?: boolean;
+}
+export interface TMultiSelectContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenu.Content> {
+    options: Option[];
+    selectedOptions: Option[];
+    toggleOption: (option: Option) => void;
+    triggerWidth?: number;
+    hasSearch?: boolean;
+    searchPlaceholder?: string;
+    searchNotFoundContent?: ReactNode;
+}
+export interface TMultiSelectItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenu.Item> {
+    option: Option;
+    isSelected: boolean;
+    toggleOption: (option: Option) => void;
+    isDisabled?: boolean;
+    isReadonly?: boolean;
+}
+export interface TUseMultiSelectValueProps {
+    values?: string[];
+    options: Option[];
+}

package/build/esm/packages/aurora/src/components/multiselect/multiselect_types.js

@@ -0,0 +1,3 @@
+import '@radix-ui/react-dropdown-menu';
+import 'react';
+//# sourceMappingURL=multiselect_types.js.map

package/build/esm/packages/aurora/src/components/multiselect/multiselect_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiselect_types.js","sourceRoot":"","sources":["../../../../../../../src/components/multiselect/multiselect_types.ts"],"names":[],"mappings":"AAAA,OAA8B,+BAA+B,CAAC;AAE9D,OAAiC,OAAO,CAAC"}

package/build/esm/packages/aurora/src/components/multiselect/multiselect_utils.d.ts

@@ -0,0 +1,7 @@
+import { Option } from "./multiselect_types";
+export declare class MultiSelectUtils {
+    static isOptionVisible: (option: Option, search: string) => boolean;
+    static isHeaderVisible: (search: string, options: Option[], index: number) => boolean;
+    static findValuesInOptions: (values: string[] | undefined, options: Option[]) => Option[];
+    static areValuesEqual: (oldValues?: string[], newValues?: string[]) => boolean | undefined;
+}

package/build/esm/packages/aurora/src/components/multiselect/multiselect_utils.js

@@ -0,0 +1,47 @@
+import { createClass as _createClass, classCallCheck as _classCallCheck, defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+
+var _MultiSelectUtils;
+var MultiSelectUtils = /*#__PURE__*/_createClass(function MultiSelectUtils() {
+  _classCallCheck(this, MultiSelectUtils);
+});
+_MultiSelectUtils = MultiSelectUtils;
+_defineProperty(MultiSelectUtils, "isOptionVisible", function (option, search) {
+  var normalizePolish = function normalizePolish(str) {
+    return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[\u0141-\u0142]/g, 'l').toLowerCase();
+  };
+  return normalizePolish(option.text).includes(normalizePolish(search));
+});
+_defineProperty(MultiSelectUtils, "isHeaderVisible", function (search, options, index) {
+  var visible = false;
+  var i = index + 1;
+  while (options[i]) {
+    var curr = options[i];
+    if (curr.isHeader) {
+      break;
+    }
+    if (_MultiSelectUtils.isOptionVisible(curr, search)) {
+      visible = true;
+      break;
+    }
+    i++;
+  }
+  return visible;
+});
+_defineProperty(MultiSelectUtils, "findValuesInOptions", function (values, options) {
+  if (!(values !== null && values !== void 0 && values.length)) return [];
+  return options.filter(function (opt) {
+    return values.includes(opt.value);
+  });
+});
+_defineProperty(MultiSelectUtils, "areValuesEqual", function (oldValues, newValues) {
+  var oldSet = new Set(oldValues);
+  var newSet = new Set(newValues);
+  return (oldValues === null || oldValues === void 0 ? void 0 : oldValues.every(function (item) {
+    return newSet.has(item);
+  })) && (newValues === null || newValues === void 0 ? void 0 : newValues.every(function (item) {
+    return oldSet.has(item);
+  }));
+});
+
+export { MultiSelectUtils };
+//# sourceMappingURL=multiselect_utils.js.map

package/build/esm/packages/aurora/src/components/multiselect/multiselect_utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/popover/components/popover_content.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;